2.7制作滚动类和日期类特效（课件）-《网页制作高级特效》同步教学（劳动版）

模块二　JavaScript 高级特效 3 1 课题 １ JavaScript 语言基础 2 课题 ２ JavaScript 对象化编程 课题 ３　制作表单验证类特效 目录 4 5 6 7 8 课题 ４　制作层切换和层提示特效 课题 ５　制作菜单类特效 课题 ６　制作广告类特效 课题 ７　制作滚动类和日期类特效 课题 ８　制作网页辅助类特效 课题 7　制作滚动类和日期类特效 学习目标 １. 能制作无缝文字滚动广告特效。 ２. 能制作无缝图片滚动广告特效。 ３. 能制作可手动控制的无缝图片滚动广告特效。 ４. 能制作日历显示特效。 ５. 能制作倒计时特效。 相关知识 一、 无缝文字滚动广告 １. Marquee 标记的缺陷 制作文字滚动类特效时，可使用 Marquee 标记来实现文字在水平或垂直方向上的滚动。在文字滚动的过程中，总会有一段时间出现无滚动文字的情况，这是使用 Marquee 标记制作文字滚动类特效的一个缺陷。 为了弥补这个缺陷，可使用 Div 层和 JavaScript 脚本代码实现广告的无缝连续滚动。 课题 7　制作滚动类和日期类特效 ２. 无缝滚动原理 课题 7　制作滚动类和日期类特效 准备滚动 课题 7　制作滚动类和日期类特效 滚动中 ３. 暂停与继续滚动 设置一个实时器，当鼠标移入时清除定时器，达到暂停的目的。 当鼠标移出时，重新设置定时器，继续滚动。 二、 无缝图片滚动广告 无缝图片滚动广告的工作原理与无缝文字滚动广告相同，区别是滚动方向不同。 无缝文字滚动广告从下向上滚动，无缝图片滚动广告从右向左滚动。 课题 7　制作滚动类和日期类特效 滚动到交界时还原 制作无缝图片滚动广告与制作无缝文字滚动广告有两点不同: (１) 需要把无缝文字滚动源程序中的 offsetTop 改成 offsetLeft ，offsetHeight 改成 offsetWidth。 (２) 为了使图片水平排列，需要多添加一个 Div，并设置左浮动。 课题 7　制作滚动类和日期类特效 无缝图片滚动广告 三、 可手动控制的无缝图片滚动广告 在无缝图片滚动的基础上，增加左、 右两个箭头，当鼠标单击左、 右箭头时，可以手动控制图片的滚动，当释放鼠标时，图片继续无缝滚动。 １. 移动宽度 ２. 变速移动 课题 7　制作滚动类和日期类特效 可手动控制的无缝图片滚动广告 四、 日历显示 １. 年、 月、 日的获取 ２. 时、 分、 秒的获取 ３. 星期的获取 ４. 输出日历 课题 7　制作滚动类和日期类特效 日历显示特效 五、 倒计时 倒计时是从未来某一时间点向现在计算时间，用于表示距离某一期限还有多少时间。 课题 7　制作滚动类和日期类特效 倒计时特效 课题 8　 制作网页辅助类特效 学习目标 １. 能制作设为主页和添加收藏特效。 ２. 能使用 JavaScript 动态改变 CSS。 ３. 能制作全国省、 市、 区三级联动特效。 相关知识 一、 设为主页和添加收藏 １. 设为主页 (１) 通过 IE 浏览器 “Internet 选项” 设置主页的方法打开 IE 浏览器→工具菜单→ Internet 选项→常规→主页 (文本框中输入要设为主页的网址) →确定→关闭浏览器。 (２) 通过 JavaScript 程序代码设置主页 <a href＝“#" onclick＝“this.style.behavior＝’url(#default#homepage)'; this.setH-omePage('主页网址');">设为首页 </a> 课题 8　 制作网页辅助类特效 ２. 添加收藏 收藏夹可以让用户上网时方便记录自己喜欢的、 常用的网站。 收藏网页的方法有多种: (１) 使用 IE 浏览器 “收藏夹” 菜单中 “添加到收藏夹” 命令收藏网页。 (２) 使用快捷键 【Ctrl ＋ D】收藏网页。 (３) 使用 JavaScript 程序代码收藏网页。 通过 JavaScript 程序代码添加收藏的语法格式如下: 课题 8　 制作网页辅助类特效 二、 使用 JavaScript 动态改变 CSS CSS 用于网页中样式的定义，它起到了美化网页的作用。 通过 JavaScript 和 CSS 联合使用，可以动态加载不同的 CSS 样式表文件，实现同一网页显示效果的 “大变脸”。 三、 省、 市、 区三级联动 省、 市、 区三级联动的显示效果: 选择省份后，自动显示该省所辖各市信息，选择城市后，自动显示该市所辖区或县信息。 课题 8　 制作网页辅助类特效 $$