第9章 JavaScript的综合实例-1.ppt

第9章 JavaScript的综合实例 教学目标 通过本章的几个综合性实例进一步巩固前面各章节的知识，融会贯通地灵活运用JavaScript相关技术。 教学要求 学习重点 对文字、图像、鼠标、表单、菜单、页面等网页对象的综合特效应用。 本章目录 9.1 【案例28】文字特效 9.2 【案例29】图像特效 9.3 【案例30】鼠标特效 9.1 ?【案例28】案例效果 本案例在第7章的综合实训的基础上完成，实现的是在链接的文本上显示提示信息，效果如图9.1所示。 代码设计 （1）启动Dreamweaver，打开素材文件夹中的文件“index.html”。 （2）切换到代码视图，在head和/head标签对输入以下CSS代码（9-1.txt）。 （3）在body和/body标签对中加入以下代码（9-1.txt）。 （4）分别在文本“More”的链接标签a中加入如下代码（9-1.txt），文字部分可自行设置。 （5）保存，按F12预览效果。 代码分析 该案例的作用是在链接的文本上显示提示信息，当用户把鼠标移到链接文本上时，下方会出现一个小方框显示相应的提示信息，从而帮助用户明确地了解链接的相关内容。 该案例的实现思路是使用一个div容器，给他一个id，并引用这个id。当鼠标移到文本上时，调用相应的显示容器的方法，鼠标移开时则隐藏该容器。案例中定义了变量ie等于对象document.all，然后可以使用变量ie方便地引用该对象的很多属性，并给他们赋值。设置提示信息出现的位置时使用了event.clientX和event.clientY属性，给出的是事件发生时的鼠标坐标。 9.2 【案例29】案例效果 本案例实现的是图片的滚动效果，鼠标悬停时停止滚动，鼠标移开时继续滚动，如图9.2所示。 代码设计 （1）启动Dreamweaver，新建HTML文件并命名为“index.html”。 （2）切换到代码视图，在body和/body标签对中输入以下CSS定义代码（9-2.txt）。 （3）定义四个div容器：继续添加如下JavaScript代码（9-2.txt）。 （4）继续添加如下JavaScript代码（9-2.txt）实现滚动效果。 （5）保存，按F12预览效果。 代码分析 案例实现的是非常平滑的JavaScript图片滚动特效，无缝循环。 其中，速度变量speed决定滚动的快慢，可自定义大小。 通过调用JavaScript函数clearInterval()取消滚动速度，实现鼠标悬停时图片停止滚动，而鼠标移开时又调用setInterval()函数重新开始图片滚动。 他的特点是JavaScript和图片地址分离，可以方便地实现从数据库动态调用每张图片的地址，非常实用。 9.3 ?【案例30】案例效果 本案例在第7章的综合实训的基础上完成，实现的是当鼠标移至公告栏文本上时停止滚动，并通过鼠标移动来控制公告栏文字移动的速度，效果如图9.3所示。 代码设计 （1）启动Dreamweaver，打开素材文件夹中的文件“index.html”。 （2）切换到代码视图，在head和/head标签对中加入以下代码（9-3.txt）。 （3）在marquee标签中加入以下代码（9-3.txt）。 （4）保存，按F12预览效果。 代码分析 案例中定义了三个函数：scrollstop()实现的是当鼠标移至公告栏文本区域时停止滚动；scrollplay()实现的是当鼠标离开公告栏文本区域时继续滚动；scrolldir()实现的则是通过获取鼠标的坐标值来控制公告栏文本滚动的速度。 变量mid的取值为当前显示器水平分辨率的一半，变量mouse取值为鼠标相对于父元素的外边界在x坐标上的位置。当鼠标位于屏幕的右侧位置时通过公式(mouse - mid) / 25重新定义速度变量speed，并赋值给scrollAmount属性；当鼠标位于屏幕的左侧位置时通过公式(mid - mouse) / 25重新定义速度变量speed，并赋值给scrollAmount属性，从而改变公告栏滚动的速度。 * * 图9-1 链接提示效果 图9-2 图片滚动效果 图9-3 移动鼠标控制公告栏文字移动效果