搜索
第15章利用JavaScript制作特效网页实例教学内容：JavaScript语言是网页中广泛使用的一种脚本语言。使用JavaScript可以使网页产生动态效果，并以其小巧简单而倍受用户的欢迎。本章将介绍JavaScript的时间特效、图像特效、窗口特效、鼠标特效、其他特效。教学重点时间特效图像特效窗口特效教学难点鼠标特效其他特效教学目标和基本要求_________________________________________________________________________________________________________教学时间：本章共分_______课时教学方法案例教学多媒体教学理论面授教学素材课程范例文件：sample\第15章\练习文件：exercise\第15章\本章各节课时分配及链接15.1时间特效——（）课时15.2图像特效——（）课时15.3窗口特效——（）课时15.4鼠标特效——（）课时15.5其他特效——（）课时15.1时间特效在网页中可以看到各种各样的动态时间显示，在网页中合理利用时间可以让网页更具有时效感。可以为表达某一意义而使用不同的时间显示方式。日期及时间特效是网页中最常见的一种特效，可以显示出当前时间、客户停留时间、自动记录网站更新日期、在一定的时间内关闭窗口等。下面通过实例介绍时间对象的不同用法和制作效果，通过本节的学习，可以进一步熟悉JavaScript这种脚本语言，同时可以掌握时间对象的使用方法。下面例用JavaScript脚本制作动态显示当前时间网页效果。本例首先利用now_time=newDate()创建了一个date对象，利用date对象的getHours()方法取得小时，getMinutes()方法取得分钟，getSeconds()方法取得秒，然后利用setTimeout(showtime(),1000)每隔1秒自动执行函数。15.1.1代码演练——显示当前时间15.1.2代码演练——显示当前日期首先定义月份和日期数组，创建一个Date（）对象的实例，利用getYear()、getMonth()、getDate()和getDay分别获取当前年、月、日期和星期，然后利用document.write（）方法输出当前日期和时间。本例可以实现访问者在页面的停留时间，主要利用SetTimeout（）方法用规定的毫秒数设置一个定时器。当达到设定的时间后显示提示信息。当确定信息后，程序操作继续显示页面停留时间。15.1.3代码演练——显示网页停留时间15.2图像特效图像是文本的解释和说明，在网页适当位置放置一些图像，不仅可以使文本更加容易阅读，而且使得网页更加具有吸引力。利用JavaScript可以制作各种各样的图像特效。15.2.1代码演练——当鼠标指针经过图像时图像震动效果下面制作当鼠标放在图片上的时候，图像出现震动效果。它的效果就是当鼠标放在图片上时，图片出现震动效果，实际上就是图片快速在限定范围内移动.就是采用的定位方式里的position:relative;进行的定位。15.2.2代码演练——图片闪烁效果制作图片闪烁效果主要是利用style.visibility属性来表示元素的可见性。15.2.3代码演练——自动切换图像为了增加页面的美观性，在进行图片切换时通常使用类似幻灯片的效果。本例介绍如何实现这种图片切换的特殊效果，主要是通过图像数组的方式访问图片在JavaScript中还提供窗口对象的方法和属性，通过这些方法和属性可以制作出各种各样的窗口特效以满足不同情况下的需要。下面以实例来看看窗口特效的具体应用。15.3窗口特效下面利用和windows对象相关的screen对象。通过screen对象可以获得显示器的特性，利用这些特性也可以对打开的新窗口进行设置，如网页的全屏显示。下面制作全屏显示窗口。15.3.1代码演练——全屏显示窗口Close()方法可以直接引用，并且没有参数的设置。当执行close()方法时，会弹出一个对话框用于询问是否确实要关闭该窗口。单击“确定”按钮以后才会关闭该窗口，否则将继续显示，但对于所创建的新窗口，在关闭时是不会出现该询问对话框的。利用setTimeout(clock();,1000)方法定义了一个定时器，可以定时关闭窗口。15.3.2代码演练——定时关闭窗口利用JavaScript还可以制作出各种各样的鼠标特效，下面就通过实例讲述禁止鼠标右键、跟随鼠标的图像和跟随鼠标的滚动字幕。15.4鼠标特效15.4.1代码演练——禁止鼠标右击在一些网页上，当用户单击鼠标右键时会弹出警告窗口或者直接没有任何反应。它的作用是让用户无法使用鼠标右键中的相应功能，从而限制了用户一定的操作权限。15.4.2代码演练——图片跟随鼠标的特效跟随鼠标移动的图像是一种特殊的鼠标效果，跟随鼠标指针移动的图像具体操作步骤如下。15.4.3代码演练——跟随鼠标的文字这是最常见的文本特效，不管鼠标移动到什么地方，都有一段文字跟随其后。本例将学习此特效的制作。15.5其他特效JavaScript脚本语言是制作特效网页的一种语言。由于其结构简单、语法宽松，一经推出就受到广大网页制作者的欢迎。除了本章前面讲述的特效外，还可以制作网站上其他常见的特效。15.5.1代码演练——设置为首页和加入收藏夹设置为首页和加入收藏夹是网页中最常见到特效。首页的设置主要利用behavior属性来设置该动作，其设置都统一为'url(#default#homepage)'，然后利用sethomepage()函数来指定所要设置为主业的url地址。而收藏夹的设置则通过href属性来完成，并由addFavorite()函数来完成收藏夹的信息设置。15.5.2代码演练——表单数据的检测下面通过实例介绍对表单数据的简单检测方法。读者也许有过这样的经验。在网站注册或留言的时候，通常都有一些限制条件，比如用户名、密码长度限制、电子邮箱格式是否正确等。既然表单是用来采集用户输入的数据，就应该保证用户的数据被正确地提交到待定地点。一方面可以避免用户误输错误信息造成不必要的损失；一方面也为网站数据库的管理提供了方便，同时也能和用户更好更及时的交流。15.5.3代码演练——防止访问者保存网页禁止保存网页主要利用在head/head之间输入no-=0scriptiframesrc=*.html/iframe/noscript代码来实现的。