网页设计与制作教程（HTML+CSS+JavaScript） 教学配套课件 刘瑞新 第9章 使用JavaScript制作网页特效.pdfVIP

网页设计与制作教程 网页设计与制作教程 （HTML+CSS+JavaScript） （HTML+CSS+JavaScript） 机械工业出版社同名教材 机械工业出版社同名教材 配套电子教案 配套电子教案 第9章 使用JavaScript制作网页特效 第9章 使用JavaScript制作网页特效 9.1 制作循环滚动的字幕 9.1 制作循环滚动的字幕 9.2 制作幻灯片切换的广告 9.2 制作幻灯片切换的广告 9.1 制作循环滚动的字幕 9.1 制作循环滚动的字幕 9.1 制作循环滚动的字幕 9.1 制作循环滚动的字幕 制作滚动字幕使用 标签，其格式为： 制作滚动字幕使用 标签，其格式为： marquee direction left|right|up|down marquee direction left|right|up|down behavior scroll|side|alternate loop i|-1|infinite behavior scroll|side|alternate loop i|-1|infinite hspace m vspace n scrollamount i scrolldelay j hspace m vspace n scrollamount i scrolldelay j bgcolor 色彩 width x|x% height y 流动文字或（和）图片 bgcolor 色彩 width x|x% height y 流动文字或（和）图片 【演练9-1 】制作循环滚动的图像字幕。制作商城笔记本电脑展示的网页，滚动 的图像支持超链接，并且鼠标指针移动到图像上时，画面静止；鼠标指针移出图 像后，图像继续滚动，页面显示的效果如图9-1所示。 9.1 制作循环滚动的字幕 9.1 制作循环滚动的字幕 制作步骤 制作步骤 （1）前期准备 （1）前期准备 在示例文件夹下创建图像文件夹images，用来存放图像 在示例文件夹下创建图像文件夹images，用来存放图像 素材。将本页面需要使用的图像素材存放在文件夹images 素材。将本页面需要使用的图像素材存放在文件夹images 下，本实例中使用的图片素材大小均为130px×98px。 下，本实例中使用的图片素材大小均为130px×98px。 （2）建立网页 （2）建立网页 在示例文件夹下新建一个名为9-1.html的网页。 在示例文件夹下新建一个名为9-1.html的网页。 （3）编写代码 （3）编写代码 【说明】制作循环滚动字幕的关键在于字幕参数的设置及合适的图像素材，要求 【说明】制作循环滚动字幕的关键在于字幕参数的设置及合适的图像素材，要求 如下。 如下。 ① 滚动字幕代码的第1行定义的是字幕Div容器，其宽度决定了字幕中能够同时 ① 滚动字幕代码的第1行定义的是字幕Div容器，其宽度决定了字幕中能够同时 显示的最多图片个数。 显示的最多图片个数。 ② 字幕Div的高度应当大于图片的高度，这是因为在图片下方定义的还有超链接 ② 字幕Div的高度应当大于图片的高度，这是因为在图片下方定义的还有超链接 文字，而文字本身也会占用一定的高度。 文字，而文字本身也会占用一定的高度。 9.2 制作幻灯片切换的广告 9.2 制作幻灯片切换的广告 在网站的首页中经常能够看到幻灯片切换的广告，既美 在网站的首页中经常能够看到幻灯片切换的广告，既美 化了页面的外观，又可以节省版面的空间。本节主要讲解如 化了页面的外观，又可以节省版面的空间。本节主要讲解如 何使用JavaScript脚本制作幻灯片切换的广告。 何使用JavaScript脚本制作幻灯片切换的广告。 【演练9-2】制作幻灯片切换的笔记本电脑广告页面，每隔一段时间，广 【演练9-2】制作幻灯片切换的笔记本电脑广告页面，每隔一段时间，广 告自动切换到下一幅画面；用户单击广告下方的数字，将直接切换到相 告自动切换到下一幅画面；用户单击广告下方的数字，将直接切换到相 应的画面；用户单击链接文字，可以打开相应的网页（读者可以根据需 应的画面；用户单击链接文字，可以打开相应的网页（读者可以根据需 要自己设置链接的页面，这里不再制作该链接功能），页面显示的效果 要自己设置链接的页面，这里不再制作该链接功能），页面显示的效果 如图9-2所示。 如图9-2所示。 9.2 制作幻灯片切换的广告 9.2 制作幻灯片切换的广告 制作步骤 制作步骤 （1）前期准备 （1）前期准备 在示例文件夹下创建图像文件夹images，用来存放图像 在示例文件夹下创建图像文件夹images，用来存放图像 素材。将本页面需要使用的图像素材存放在文件夹images 素材。将本页面需要使用的