网页设计与制作第8章 网页特效——JavaScript.ppt

第8章 网页特效——JavaScript JavaScript语言的前身叫作LiveScript，自从Sun公司推出著名的Java语言后，Netscape公司引进了Sun公司有关Java的程序概念，将LiveScript重新进行设计，并改名为JavaScript。 目前流行的多数浏览器都支持JavaScript，如Netscape公司的Navigator 3.0以上版本，Microsoft公司的Internet Explorer 3.0以上版本。 JavaScript是一种行为脚本语言，用JavaScript可以创建出运行在多平台和浏览器上的交互行为和效果。 8.1 JavaScript简介 8.2.1 在HTML文档中嵌入脚本程序 JavaScript的脚本程序包括在HTML中，使之成为HTML文档的一部分。其格式为： script language =JavaScript JavaScript语言代码; JavaScript语言代码; … /Script 【演练 8-1】在HTML文档中嵌入JavaScript的脚本，本例文件8-1.html在浏览器中显示的效果如图8-1和图8-2所示。 8.2 在网页中插入JavaScript的方法及定义 8.2.2 引用脚本文件 如果已经存在一个脚本文件（以js为扩展名），则可以使用script标记的src属性引用外部脚本文件的URL。采用引用脚本文件的方式，可以提高程序代码的利用率。 其格式为： head … script type=text/javascript src=脚本文件名.js/script … /head 8.2 在网页中插入JavaScript的方法及定义 8.2.3 在HTML标签内添加脚本 可以在HTML表单的输入标记符内添加脚本，以响应输入的事件。 【演练8-2】在标记中添加JavaScript的脚本，本例文件8-2.html在浏览器中显示的效果如图8-3和图8-4所示。 8.2 在网页中插入JavaScript的方法及定义 8.3.1 循环滚动的图文字幕 在网站的首页经常可以看到循环滚动的图文展示信息，来引起浏览者的注意，这种技术是通过滚动字幕技术实现的。 1．字幕标签的语法 在网页中，制作滚动字幕使用marquee标签，其格式为： 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 8.3 常见的网页特效 8.3.1 循环滚动的图文字幕 2．案例——循环展示的图书 【演练8-3】制作循环滚动的图像字幕。制作书城图书展示的网页，滚动的图像支持超链接，并且鼠标指针移动到图像上时，画面静止；鼠标指针移出图像后，图像继续滚动，页面显示的效果如图所示。 8.3 常见的网页特效 8.3.2 幻灯片切换的广告 1．准备幻灯片播放器 2．案例—— 幻灯片切换的广告 【例8-4】制作Flash幻灯片广告，每隔一段时间，广告自动切换到下一幅画面；用户单击广告下方的数字，将直接切换到相应的画面；用户单击链接文字，可以打开相应的网页（读者可以根据需要自己设置链接的页面，这里不再制作该链接功能），页面显示的效果如图所示。 8.3 常见的网页特效 【实训】在前面的章节中已经讲解了纵向列表模式导航菜单，在本章的实训中将讲解使用CSS样式结合JavaScript脚本制作二级纵向列表模式的导航菜单，本例文件8-5.html在浏览器中的浏览效果如图8-7所示。 8.4 实训——制作二级纵向列表模式的导航菜单