第15章 JavaScript常用特效收集.ppt

1、第15章 JavaScript常用特效收集,JavaScript的网页特效运用在很多的方面，能够实现很多绚丽多彩的特殊效果。根据效果的基本性质大概可以分为文字特效、鼠标特效、图片特效、页面特效、时间特效等，本节就分别举例进行说明。,15.1 使用文字特效,网页最开始的时候，主要的内容就是文本，因此文本特效在网页中是数不胜数，下面列举一些常见的文字特效。,15.1.1 随机文本,本例的效果是浏览器访问网页时，根据备选结果里设置好的文字，随机出现文本。本例主要利用了数学函数产生随机的序号，以序号作为保存随机文本数组的下标，最后通过读取数组元素内容得到随机文本。,15.1.2 文本链接颜色变换,本例

2、控制具有链接的文本，根据一定的规律实现颜色的转换，通过一个数组来设置变换的可选颜色，主函数linkDance用来获得页面的链接文本，并且通过setTimeout延迟函数来控制链接颜色间隔转换，并且使用递归让效果持续循环。,15.1.3 上下跳动的文本,本例的效果是文本在页面区域上下跳动，变换位置，通过anim函数来进行位置的变换（主要的原理就是改变文本所在对象的top属性）同时实现自身的递归循环，通过start函数来实现主函数的启动。,15.1.4 定期滚动文本,本例的效果是指定的内容滚动显示，可以设定显示区域、颜色等。 本例的效果使用非常广泛，很多大型的网站都运用了这个效果，尤其在广告的发布

3、上面。本例的效果是在某个指定的区域，定期会滚动显示内容，每隔一段时间间隔轮换，如此循环，效果如图所示。,15.1.5 链接提示文字,网页里有很多超链接，有的链接因为区域的关系，不能显示很多的文字，这时就可以使用给链接增加提示的方式来进行额外的说明，当鼠标移上的时候，就能够显示说明的内容。,15.2 使用鼠标特效,鼠标控制了网页上的大部分动作，很多的工作都是由鼠标来完成的，比如单击、双击、勾选等。鼠标的特效也很多，举例如下。,15.2.1 禁止鼠标右键,禁止鼠标右键的功能，也是很多网站为了保护网页内容而做的一个小技巧，比如不允许网友下载图片、利用右键菜单进行复制操作等。屏蔽鼠标右键功能不能完全的

4、防止这些，有经验的用户通过一些步骤同样能够达到目的，本例只是为了说明使用JavaScript对鼠标按键的控制。,15.2.2 多种鼠标效果,本例主要使用了CSS的样式来规定鼠标的风格，通过style属性来进行设置。 鼠标的形状，能够告诉用户当前鼠标指向的区域的状态，比如链接、可单击等，或者计算机目前的状态，如忙碌、等待等。本例显示了很多的鼠标形状，可以在合适的时候进行选择。效果图如所示。,15.2.3 十字准星,十字准星是鼠标的又一个效果，鼠标在页面上有个坐标点，以这个点为交点的竖直和水平的两条直线，始终跟随着鼠标，像一个准星一样。 这个效果是一个特别酷的效果，有点类似于狙击枪的准星。效果如图

5、所示。,15.2.4 鼠标跟踪动画,鼠标特效里还有一个比较有趣的效果，就是一些小图标跟随着鼠标的运动轨迹而运动，这个特效能够设置跟随鼠标的图片，同时还能变化为跟随鼠标的文字。 本例主要是通过JavaScript获得了鼠标的位置，并且使得图片的位置随着鼠标的位置更改，这样可以实现鼠标跟踪的效果，指定的图片可以跟踪鼠标的滑动轨迹而跟着滑动，非常酷。效果如图所示。,15.2.5 伴随鼠标的图片,与上例比较类似的效果是一个固定的图片，始终伴随着鼠标，这个例子显得比较简单，就是使得图片和鼠标始终保持一个相对的位置即可。 本例中，指定的图片会跟着鼠标的移动保持着与鼠标的相对位置。效果如图所示。,15.3

6、使用图片特效,图片的出现，使得网页变得更加的丰富，图片的特效也不少，图片本身具有的丰富信息加上一些效果，会使得网页更加有吸引力。,15.3.1 图片若隐若现,通过改变图片的透明度，可以使得图片的可见程序能够被JavaScript调节，结合合适的时间间隔，就可以使得图片产生若隐若现的特殊效果。 在本例中，显示的图片主要通过改变其透明度实现若隐若现。效果如图所示。,15.3.2 四处飘浮的小球,本例的效果是一个小球在页面内四处飘浮，在大部分的网站中，把小球换成了相关的广告图片，来实现广告的飘浮效果。 这个例子在很多的广告效果里使用到，通过改变飘动的速度实现广告图片的四处游走。效果如图所示。,15.

7、3.3 变换图片,在电子商务网站里，对于产品展示的页面，通常需要根据选择的产品名称显示对应的产品图片，本例对此做了简单的示例。,15.3.4 图片秋千,改变图片位置的方法，还有使得图片在水平方向上做循环的运动，类似荡秋千一样，原理同样是在一定的时间周期上，有规律的改变图片的位置。 一个有趣的效果，可以设置晃动的幅度及速度，效果如图所示。,15.4 使用页面特效,页面是整个网页的主体，页面有背景颜色、背景图片等样式，同样也具有一些特效。,15.4.1 调色板,本例原理很简单，就是通过JavaScript改变页面的背景颜色，本例列出了常见的颜色表，用于进行颜色的选择。 通过选择不同的颜色选项，改变

8、了页面的背景色。效果如图所示。,15.4.2 背景滚动,通过JavaScript改变背景图片与页面的相对位置，还能实现背景图片滚动的效果，配合合适的背景图片，可以实现特殊的效果。 浏览后可以看见，背景在不停的滚动，本例是一个星空的图片，这样的效果显得很不错。效果如图所示。,15.4.3 水印背景,很多的页面，设置了背景图片后，随着页面内容的改变，背景图片的大小变得不适合页面的尺寸，这样会显得不太协调，为了解决这个问题，可以JavaScript改变背景图片的对齐及重复样式，来实现图片的水印效果，也就是不论页面的内容如何变化，图片的位置始终保持固定。,15.5 使用时间特效,时间和日期的使用在网页

9、里也很常见，通过时间和日期的使用，在网页上标注当前的日期或者时间，也可以显示各种时钟样式。,15.5.1 日期和星期,在网页上显示当前的时间和星期是很常见的一种效果，本例主要通过JavaScript获取本地计算机的时间，最后显示在页面上即可。,15.5.2 万年历,有了一个电子万年历，就可以面去了翻看日历了，本例同样是使用JavaScript内置的时间对象，获取相关的值，通过巧妙的页面设计，显示出了一个万年日历。 一个万年历，在这个程序基础上，可以扩展出很多的日历控件。效果如图所示。,15.5.3 倒计时,页面上通常会对某个固定的时间倒计时提示，同样是利用了JavaScript的时间对象，获取当前时间，与设定的到期时间进行比较，即可实现倒计时效果。 以上是以天为单位的倒计时，还可以扩展到小时、分、秒等。效果如图所示。,15.5.4 JavaScript时钟,通过JavaScript还能够创建出时钟效果，本例显得较为复杂，主要原理是需要构建时钟的布局，以及根据当前时间，动态的改变创建时钟的指针位置。 这是一个完全用JavaScript实现的时钟，没有使用任何的图片，结合了数