第9章 使用JavaScript制作网页特效
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
பைடு நூலகம்
<marquee direction="left|right|up|down" behavior="scroll|side|alternate" loop="i|-1|infinite" hspace="m" vspace="n" scrollamount="i" scrolldelay="j" bgcolor="色彩" width="x|x%" height="y"> 流动文字或（和）图片 </marquee>
9.2 制作幻灯片切换的广告
制作步骤 （1）前期准备 在示例文件夹下创建图像文件夹images，用来存放图像 素材。将本页面需要使用的图像素材存放在文件夹images下， 本实例中使用的图片素材大小均为130px×98px。 （2）建立网页 在示例文件夹下新建一个名为9-1.html的网页。 （3）编写代码
【演练9-1】制作循环滚动的图像字幕。制作商城笔记本电脑展示的网页，滚动 的图像支持超链接，并且鼠标指针移动到图像上时，画面静止；鼠标指针移出图 像后，图像继续滚动，页面显示的效果如图9-1所示。
9.1 制作循环滚动的字幕
制作步骤 （1）前期准备 在示例文件夹下创建图像文件夹images，用来存放图像 素材。将本页面需要使用的图像素材存放在文件夹images下， 本实例中使用的图片素材大小均为130px×98px。 （2）建立网页 在示例文件夹下新建一个名为9-1.html的网页。 （3）编写代码
【说明】制作幻灯片切换效果的关键在于播放器参数的设置及合适的图像素材， 要求如下。 ① 播放器参数中的focus_width设置为图片的宽度（410px），focus_height 设置为图片的高度（350px），text_height设置为文字的高度（20px）， pics用于定义图片的来源，links用于定义链接文字的链接地址，texts用于定义 链接文字的内容。 ② 幻灯片所在Div容器的宽度应当等于图片的宽度，Div容器的高度应当等于图 片的高度+文字的高度。
网页设计与制作教程 （HTML+CSS+JavaScript）
机械工业出版社同名教材 配套电子教案
第9章 使用JavaScript制作网页特效
9.1 制作循环滚动的字幕 9.2 制作幻灯片切换的广告
9.1 制作循环滚动的字幕
9.1 制作循环滚动的字幕 制作滚动字幕使用<marquee>标签，其格式为：
9.3 实训
在前面的章节中已经讲解了纵向列表模式导航菜单，在本 章的实训中将讲解使用CSS样式结合JavaScript脚本制作二级 纵向列表模式的导航菜单，页面显示效果如图9-3所示。
9.3 实训
制作过程如下。 （1）建立网页结构 首先建立一个包含二级导航菜单选项的嵌套无序列表。 其中，一级导航菜单包含4个菜单项，二级导航菜单包含用 于实现导航的文字链接。 （2）设置菜单的CSS样式 在设计网页菜单时，一般二级导航是被隐藏的，只有当 鼠标经过一级导航时才会触发二级导航的显示，而当鼠标移 开后，二级导航又自动隐藏。 （3）添加实现二级导航菜单的JavaScript脚本 在页面的<head>…</head>之间添加实现二级导航菜单 的JavaScript脚本。代码中需要指定鼠标经过一级导航时的 类名over。
【说明】制作循环滚动字幕的关键在于字幕参数的设置及合适的图像素材，要求 如下。 ① 滚动字幕代码的第1行定义的是字幕Div容器，其宽度决定了字幕中能够同时 显示的最多图片个数。 ② 字幕Div的高度应当大于图片的高度，这是因为在图片下方定义的还有超链接 文字，而文字本身也会占用一定的高度。
9.2 制作幻灯片切换的广告
习题9
1．使用时间轴制作一个循环切换画面的广告网页。每隔一 段时间，广告自动切换到下一幅画面；用户单击广告右 边的小图，将直接切换到相应的画面，效果如图9-5所 示。 2．制作一个禁止使用鼠标右键操作的网页。当浏览者在网 页上单击鼠标右键时，自动弹出一个警告对话框，禁止 用户使用右键快捷菜单，实例效果如图9-6所示。 3．在网页中插入JavaScript脚本实现滚动字幕和鼠标跟 随天使的特效，如图9-7所示。
在网站的首页中经常能够看到幻灯片切换的广告，既美 化了页面的外观，又可以节省版面的空间。本节主要讲解如 何使用JavaScript脚本制作幻灯片切换的广告。
【演练9-2】制作幻灯片切换的笔记本电脑广告页面，每隔一段时间，广 告自动切换到下一幅画面；用户单击广告下方的数字，将直接切换到相 应的画面；用户单击链接文字，可以打开相应的网页（读者可以根据需 要自己设置链接的页面，这里不再制作该链接功能），页面显示的效果 如图9-2所示。
<marquee direction="left|right|up|down" behavior="scroll|side|alternate" loop="i|-1|infinite" hspace="m" vspace="n" scrollamount="i" scrolldelay="j" bgcolor="色彩" width="x|x%" height="y"> 流动文字或（和）图片 </marquee>
9.2 制作幻灯片切换的广告
制作步骤 （1）前期准备 在示例文件夹下创建图像文件夹images，用来存放图像 素材。将本页面需要使用的图像素材存放在文件夹images下， 本实例中使用的图片素材大小均为130px×98px。 （2）建立网页 在示例文件夹下新建一个名为9-1.html的网页。 （3）编写代码
【演练9-1】制作循环滚动的图像字幕。制作商城笔记本电脑展示的网页，滚动 的图像支持超链接，并且鼠标指针移动到图像上时，画面静止；鼠标指针移出图 像后，图像继续滚动，页面显示的效果如图9-1所示。
9.1 制作循环滚动的字幕
制作步骤 （1）前期准备 在示例文件夹下创建图像文件夹images，用来存放图像 素材。将本页面需要使用的图像素材存放在文件夹images下， 本实例中使用的图片素材大小均为130px×98px。 （2）建立网页 在示例文件夹下新建一个名为9-1.html的网页。 （3）编写代码
【说明】制作幻灯片切换效果的关键在于播放器参数的设置及合适的图像素材， 要求如下。 ① 播放器参数中的focus_width设置为图片的宽度（410px），focus_height 设置为图片的高度（350px），text_height设置为文字的高度（20px）， pics用于定义图片的来源，links用于定义链接文字的链接地址，texts用于定义 链接文字的内容。 ② 幻灯片所在Div容器的宽度应当等于图片的宽度，Div容器的高度应当等于图 片的高度+文字的高度。
网页设计与制作教程 （HTML+CSS+JavaScript）
机械工业出版社同名教材 配套电子教案
第9章 使用JavaScript制作网页特效
9.1 制作循环滚动的字幕 9.2 制作幻灯片切换的广告
9.1 制作循环滚动的字幕
9.1 制作循环滚动的字幕 制作滚动字幕使用<marquee>标签，其格式为：
9.3 实训
在前面的章节中已经讲解了纵向列表模式导航菜单，在本 章的实训中将讲解使用CSS样式结合JavaScript脚本制作二级 纵向列表模式的导航菜单，页面显示效果如图9-3所示。
9.3 实训
制作过程如下。 （1）建立网页结构 首先建立一个包含二级导航菜单选项的嵌套无序列表。 其中，一级导航菜单包含4个菜单项，二级导航菜单包含用 于实现导航的文字链接。 （2）设置菜单的CSS样式 在设计网页菜单时，一般二级导航是被隐藏的，只有当 鼠标经过一级导航时才会触发二级导航的显示，而当鼠标移 开后，二级导航又自动隐藏。 （3）添加实现二级导航菜单的JavaScript脚本 在页面的<head>…</head>之间添加实现二级导航菜单 的JavaScript脚本。代码中需要指定鼠标经过一级导航时的 类名over。
【说明】制作循环滚动字幕的关键在于字幕参数的设置及合适的图像素材，要求 如下。 ① 滚动字幕代码的第1行定义的是字幕Div容器，其宽度决定了字幕中能够同时 显示的最多图片个数。 ② 字幕Div的高度应当大于图片的高度，这是因为在图片下方定义的还有超链接 文字，而文字本身也会占用一定的高度。
9.2 制作幻灯片切换的广告
习题9
1．使用时间轴制作一个循环切换画面的广告网页。每隔一 段时间，广告自动切换到下一幅画面；用户单击广告右 边的小图，将直接切换到相应的画面，效果如图9-5所 示。 2．制作一个禁止使用鼠标右键操作的网页。当浏览者在网 页上单击鼠标右键时，自动弹出一个警告对话框，禁止 用户使用右键快捷菜单，实例效果如图9-6所示。 3．在网页中插入JavaScript脚本实现滚动字幕和鼠标跟 随天使的特效，如图9-7所示。
在网站的首页中经常能够看到幻灯片切换的广告，既美 化了页面的外观，又可以节省版面的空间。本节主要讲解如 何使用JavaScript脚本制作幻灯片切换的广告。
【演练9-2】制作幻灯片切换的笔记本电脑广告页面，每隔一段时间，广 告自动切换到下一幅画面；用户单击广告下方的数字，将直接切换到相 应的画面；用户单击链接文字，可以打开相应的网页（读者可以根据需 要自己设置链接的页面，这里不再制作该链接功能），页面显示的效果 如图9-2所示。