利用JavaScript制作网页特效

教学内容 利用JavaScript可以轻松制作网页特效 如可以制作显示当前时间 跟随鼠标的文字 本章就来介绍利用JavaScript制作时间特效 图像特效 窗口特效 鼠标特效和其他一些常见特效的方法 第16章利用JavaScript制作网页特效 教学重点掌握时间特效的应用掌握图像特效的应用掌握窗口特效的应用掌握鼠标特效的应用掌握其他特效的应用 16 1时间特效 在网页中经常可以看到各种各样的动态时间显示 在网页中合理地使用时间可以增加网页的时效感 下面通过实例讲述时间特效的制作 在很多的网页上都显示当前的时间 下面利用getHours getMinutes getSeconds 分别获得当前小时数 获得当前分钟数 获得当前秒数 然后给时间变量timer赋值 最后在文本框中显示当前时间 16 1 1显示当前时间 首先定义一个星期数组initArray 然后利用getYear getMonth getDate getDay 分别获得当前年份 获得当前月份 获得当前日数 获得当前星期 16 1 2显示当前日期 16 1 3显示网页停留时间 显示网页停留时间也是一种常见的网页特效 首先用定义一个表单 然后在表单内使用标记定义一个文本框 然后定义一个functionupdate 函数计算停留时间 最后利用 document forms input1 value hour 时 min 分 sec 秒 在文本框中显示停留时间 16 1 4制作倒计时特效 倒计时特效可以让用户明确知道到某个日期剩余的时间 制作倒计时特效的具体操作步骤如下 图像是文本的解释和说明 在网页中的适当位置放置一些图像 不仅可以使文本更加容易阅读 而且可以使网页更加具有吸引力 利用JavaScript可以制作各种各样的图像特效 16 2图像特效 16 2 1当鼠标指针经过图像时图像震动效果 下面制作当鼠标指针放在图像上的时候 图像出现震动的效果 具体操作步骤如下 16 2 2图片闪烁效果 制作图片闪烁效果主要是利用style visibility属性来表示元素的可见性 制作图片闪烁效果的具体操作步骤如下 利用图像数组可以实现自动切换图像效果 具体操作步骤如下 16 2 3自动切换图像 在JavaScript中还提供了窗口对象的方法和属性 通过这些方法和属性可以制作出各种各样的窗口特效 下面以实例来看看窗口特效的具体应用 16 3窗口特效 16 3 1全屏显示窗口 利用fullscreen yes可以制作全屏显示窗口 具体操作步骤如下 制作定时关闭窗口的具体操作步骤如下 16 3 2定时关闭窗口 利用JavaScript还可以制作出各种各样的鼠标特效 下面就通过三个实例讲述禁止鼠标右击 跟随鼠标指针的图像和跟随鼠标指针的滚动字幕效果的制作 16 4鼠标特效 16 4 1禁止鼠标右击 在一些网页上 当用户单击鼠标右键时会弹出警告窗口或者直接没有任何反应 其作用是让用户无法使用鼠标右键中的相应功能 从而限制用户一定的操作权限 16 4 2跟随鼠标指针移动的图像 跟随鼠标指针移动的图像是一种特殊的鼠标效果 跟随鼠标指针移动的图像具体操作步骤如下 跟随鼠标指针的滚动字幕的具体操作步骤如下 16 4 3跟随鼠标指针的滚动字幕 可以制作网站上其他常见的特效 16 5其他特效 设置为首页和加入收藏夹是网页中最常见的特效 具体操作步骤如下 16 5 1设置为首页和加入收藏夹 16 5 2浏览器状态栏显示信息 浏览器状态栏信息是由windows对象中的status属性来进行控制的 浏览器状态栏显示信息的具体操作步骤如下 16 5 3进入网站的口令设置 进入网站的口令设置的具体操作步骤如下 16 6经典习题 1 填空题 1 在很多的网页上都显示当前的时间 利用 分别获得当前小时数 获