Html Css JavaScript标准教程 第15章 利用JavaScript制作特效网页实例.ppt

《Html Css JavaScript标准教程 第15章 利用JavaScript制作特效网页实例.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第15章利用JavaScript制作特效网页实例教学内容：JavaScript语言是网页中广泛使用的一种脚本语言。使用JavaScript可以使网页产生动态效果，并以其小巧简单而倍受用户的欢迎。本章将介绍JavaScript的时间特效、图像特效、窗口特效、鼠标特效、其他特效。教学重点时间特效图像特效窗口特效教学难点鼠标特效其他特效教学目标和基本要求_________________________________________________________________________________________________________教学时

2、间：本章共分_______课时教学方法案例教学多媒体教学理论面授教学素材课程范例文件：sample第15章练习文件：exercise第15章本章各节课时分配及链接15.1时间特效——（）课时15.2图像特效——（）课时15.3窗口特效——（）课时15.4鼠标特效——（）课时15.5其他特效——（）课时15.1时间特效在网页中可以看到各种各样的动态时间显示，在网页中合理利用时间可以让网页更具有时效感。可以为表达某一意义而使用不同的时间显示方式。日期及时间特效是网页中最常见的一种特效，可以显示出当前时间、客户停留时间、自动记录网站更新日期、在一定的时间内关闭

3、窗口等。下面通过实例介绍时间对象的不同用法和制作效果，通过本节的学习，可以进一步熟悉JavaScript这种脚本语言，同时可以掌握时间对象的使用方法。下面例用JavaScript脚本制作动态显示当前时间网页效果。本例首先利用now_time=newDate()创建了一个date对象，利用date对象的getHours()方法取得小时，getMinutes()方法取得分钟，getSeconds()方法取得秒，然后利用setTimeout("showtime()",1000)每隔1秒自动执行函数。15.1.1代码演练——显示当前时间15.1.2代码演练——显示当前日

4、期首先定义月份和日期数组，创建一个Date（）对象的实例，利用getYear()、getMonth()、getDate()和getDay分别获取当前年、月、日期和星期，然后利用document.write（）方法输出当前日期和时间。本例可以实现访问者在页面的停留时间，主要利用SetTimeout（）方法用规定的毫秒数设置一个定时器。当达到设定的时间后显示提示信息。当确定信息后，程序操作继续显示页面停留时间。15.1.3代码演练——显示网页停留时间15.2图像特效图像是文本的解释和说明，在网页适当位置放置一些图像，不仅可以使文本更加容易阅读，而且使得网页更加具有吸

5、引力。利用JavaScript可以制作各种各样的图像特效。15.2.1代码演练——当鼠标指针经过图像时图像震动效果下面制作当鼠标放在图片上的时候，图像出现震动效果。它的效果就是当鼠标放在图片上时，图片出现震动效果，实际上就是图片快速在限定范围内移动.就是采用的定位方式里的position:relative;进行的定位。15.2.2代码演练——图片闪烁效果制作图片闪烁效果主要是利用style.visibility属性来表示元素的可见性。15.2.3代码演练——自动切换图像为了增加页面的美观性，在进行图片切换时通常使用类似幻灯片的效果。本例介绍如何实现这种图片切换的

6、特殊效果，主要是通过图像数组的方式访问图片在JavaScript中还提供窗口对象的方法和属性，通过这些方法和属性可以制作出各种各样的窗口特效以满足不同情况下的需要。下面以实例来看看窗口特效的具体应用。15.3窗口特效下面利用和windows对象相关的screen对象。通过screen对象可以获得显示器的特性，利用这些特性也可以对打开的新窗口进行设置，如网页的全屏显示。下面制作全屏显示窗口。15.3.1代码演练——全屏显示窗口Close()方法可以直接引用，并且没有参数的设置。当执行close()方法时，会弹出一个对话框用于询问是否确实要关闭该窗口。单击“确定”按

7、钮以后才会关闭该窗口，否则将继续显示，但对于所创建的新窗口，在关闭时是不会出现该询问对话框的。利用setTimeout("clock();",1000)方法定义了一个定时器，可以定时关闭窗口。15.3.2代码演练——定时关闭窗口利用JavaScript还可以制作出各种各样的鼠标特效，下面就通过实例讲述禁止鼠标右键、跟随鼠标的图像和跟随鼠标的滚动字幕。15.4鼠标特效15.4.1代码演练——禁止鼠标右击在一些网页上，当用户单击鼠标右键时会弹出警告窗口或者直接没有任何反应。它的作用是让用户无法使用鼠标右键中的相应功能，从而限制了用户一定的操作权限。15.4.2代码演

8、练——图片跟随鼠标的特效