利用JavaScript制作网页特效.ppt

《利用JavaScript制作网页特效.ppt》由会员分享，可在线阅读，更多相关《利用JavaScript制作网页特效.ppt（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教学内容：教学内容：教学内容：教学内容：利用JavaScript可以轻松制作网页特效，如可以制作显示当前时间、跟随鼠标的文字。本章就来介绍利用JavaScript制作时间特效、图像特效、窗口特效、鼠标特效和其他一些常见特效的方法。第16章 利用JavaScript制作网页特效 教学重点教学重点掌握时间特效的应用 掌握图像特效的应用 掌握窗口特效的应用 掌握鼠标特效的应用 掌握其他特效的应用 16.1 16.1 时间特效时间特效在网页中经常可以看到各种各样的动态时间显示，在网页中合理地使用时间可以增加网页的时效感。下面通过实例讲述时间特效的制作。在很多的网页上都显示当前的时间，下面利用getHo

2、urs()、getMinutes()、getSeconds()分别获得当前小时数、获得当前分钟数、获得当前秒数，然后给时间变量timer赋值，最后在文本框中显示当前时间。16.1.1 16.1.1 显示当前时间显示当前时间首先定义一个星期数组initArray()，然后利用getYear()、getMonth()、getDate()、getDay()分别获得当前年份、获得当前月份、获得当前日数、获得当前星期。16.1.2 16.1.2 显示当前日期显示当前日期16.1.3 16.1.3 显示网页停留时间显示网页停留时间显示网页停留时间也是一种常见的网页特效。首先用定义一个表单，然后在表单内使用

3、标记定义一个文本框，然后定义一个function update()函数计算停留时间，最后利用“document.forms.input1.value=hour+时+min+分+sec+秒”在文本框中显示停留时间。16.1.4 16.1.4 制作倒计时特效制作倒计时特效倒计时特效可以让用户明确知道到某个日期剩余的时间，制作倒计时特效的具体操作步骤如下。图像是文本的解释和说明，在网页中的适当位置放置一些图像，不仅可以使文本更加容易阅读，而且可以使网页更加具有吸引力。利用JavaScript可以制作各种各样的图像特效。16.2 16.2 图像特效图像特效16.2.1 16.2.1 当鼠标指针经过图像

4、时图像震动效果当鼠标指针经过图像时图像震动效果下面制作当鼠标指针放在图像上的时候，图像出现震动的效果，具体操作步骤如下。16.2.2 16.2.2 图片闪烁效果图片闪烁效果制作图片闪烁效果主要是利用style.visibility属性来表示元素的可见性。制作图片闪烁效果的具体操作步骤如下。利用图像数组可以实现自动切换图像效果，具体操作步骤如下。16.2.3 16.2.3 自动切换图像自动切换图像在JavaScript中还提供了窗口对象的方法和属性，通过这些方法和属性可以制作出各种各样的窗口特效。下面以实例来看看窗口特效的具体应用。16.3 16.3 窗口特效窗口特效16.3.1 16.3.1

5、全屏显示窗口全屏显示窗口利用fullscreen=yes可以制作全屏显示窗口，具体操作步骤如下。制作定时关闭窗口的具体操作步骤如下。16.3.2 16.3.2 定时关闭窗口定时关闭窗口利用JavaScript还可以制作出各种各样的鼠标特效，下面就通过三个实例讲述禁止鼠标右击、跟随鼠标指针的图像和跟随鼠标指针的滚动字幕效果的制作。16.4 16.4 鼠标特效鼠标特效16.4.1 16.4.1 禁止鼠标右击禁止鼠标右击在一些网页上，当用户单击鼠标右键时会弹出警告窗口或者直接没有任何反应。其作用是让用户无法使用鼠标右键中的相应功能，从而限制用户一定的操作权限。16.4.2 16.4.2 跟随鼠标指针

6、移动的图像跟随鼠标指针移动的图像跟随鼠标指针移动的图像是一种特殊的鼠标效果，跟随鼠标指针移动的图像具体操作步骤如下。跟随鼠标指针的滚动字幕的具体操作步骤如下。16.4.3 16.4.3 跟随鼠标指针的滚动字幕跟随鼠标指针的滚动字幕可以制作网站上其他常见的特效。16.5 16.5 其他特效其他特效设置为首页和加入收藏夹是网页中最常见的特效，具体操作步骤如下。16.5.1 16.5.1 设置为首页和加入收藏夹设置为首页和加入收藏夹16.5.2 16.5.2 浏览器状态栏显示信息浏览器状态栏显示信息浏览器状态栏信息是由windows对象中的status属性来进行控制的，浏览器状态栏显示信息的具体操作步骤如下。16.5.3 16.5.3 进入网站的口令设置进入网站的口令设置进入网站的口令设置的具体操作步骤如下。16.6经典习题1.1.填空填空题（1）在很多的网页上都显示当前的时间，利用_、_、_分别获得当前小时数、获得当前分钟数、获得当前秒数。（2）浏览器状态栏信息是由windows对象中的_属性来进行控制的。2.上机操作题利用JavaScript制作如图16.18所示的特效网页。