JavaScript常用特效收集

《JavaScript常用特效收集》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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十字准星十字准星是鼠标的又一个效果，鼠标在页面上有个坐标点，以这个点为交点的竖直和水平的两条直线，始终跟随着鼠标，像一个准星一样。这个效果是一个特别酷的效果，有点类似于狙击枪的准星。效果如图所示。15.2.4鼠标跟踪动画鼠标特效

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

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

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