第章 Javacript常用特效收集.pptVIP

第15章 JavaScript常用特效收集 JavaScript的网页特效运用在很多的方面，能够实现很多绚丽多彩的特殊效果。根据效果的基本性质大概可以分为文字特效、鼠标特效、图片特效、页面特效、时间特效等，本节就分别举例进行说明。 15.1 使用文字特效 网页最开始的时候，主要的内容就是文本，因此文本特效在网页中是数不胜数，下面列举一些常见的文字特效。 15.1.1 随机文本 本例的效果是浏览器访问网页时，根据备选结果里设置好的文字，随机出现文本。本例主要利用了数学函数产生随机的序号，以序号作为保存随机文本数组的下标，最后通过读取数组元素内容得到随机文本。 15.1.2 文本链接颜色变换 本例控制具有链接的文本，根据一定的规律实现颜色的转换，通过一个数组来设置变换的可选颜色，主函数linkDance用来获得页面的链接文本，并且通过setTimeout延迟函数来控制链接颜色间隔转换，并且使用递归让效果持续循环。 15.1.3 上下跳动的文本 本例的效果是文本在页面区域上下跳动，变换位置，通过anim函数来进行位置的变换（主要的原理就是改变文本所在对象的top属性）同时实现自身的递归循环，通过start函数来实现主函数的启动。 15.1.4 定期滚动文本 本例的效果是指定的内容滚动显示，可以设定显示区域、颜色等。 本例的效果使用非常广泛，很多大型的网站都运用了这个效果，尤其在广告的发布上面。本例的效果是在某个指定的区域，定期会滚动显示内容，每隔一段时间间隔轮换，如此循环，效果如图所示。 15.1.5 链接提示文字 网页里有很多超链接，有的链接因为区域的关系，不能显示很多的文字，这时就可以使用给链接增加提示的方式来进行额外的说明，当鼠标移上的时候，就能够显示说明的内容。 15.2 使用鼠标特效 鼠标控制了网页上的大部分动作，很多的工作都是由鼠标来完成的，比如单击、双击、勾选等。鼠标的特效也很多，举例如下。 15.2.1 禁止鼠标右键 禁止鼠标右键的功能，也是很多网站为了保护网页内容而做的一个小技巧，比如不允许网友下载图片、利用右键菜单进行复制操作等。屏蔽鼠标右键功能不能完全的防止这些，有经验的用户通过一些步骤同样能够达到目的，本例只是为了说明使用JavaScript对鼠标按键的控制。 15.2.2 多种鼠标效果 本例主要使用了CSS的样式来规定鼠标的风格，通过style属性来进行设置。 鼠标的形状，能够告诉用户当前鼠标指向的区域的状态，比如链接、可单击等，或者计算机目前的状态，如忙碌、等待等。本例显示了很多的鼠标形状，可以在合适的时候进行选择。效果图如所示。 15.2.3 十字准星 十字准星是鼠标的又一个效果，鼠标在页面上有个坐标点，以这个点为交点的竖直和水平的两条直线，始终跟随着鼠标，像一个准星一样。 这个效果是一个特别酷的效果，有点类似于狙击枪的准星。效果如图所示。 15.2.4 鼠标跟踪动画 鼠标特效里还有一个比较有趣的效果，就是一些小图标跟随着鼠标的运动轨迹而运动，这个特效能够设置跟随鼠标的图片，同时还能变化为跟随鼠标的文字。 本例主要是通过JavaScript获得了鼠标的位置，并且使得图片的位置随着鼠标的位置更改，这样可以实现鼠标跟踪的效果，指定的图片可以跟踪鼠标的滑动轨迹而跟着滑动，非常酷。效果如图所示。 15.2.5 伴随鼠标的图片 与上例比较类似的效果是一个固定的图片，始终伴随着鼠标，这个例子显得比较简单，就是使得图片和鼠标始终保持一个相对的位置即可。 本例中，指定的图片会跟着鼠标的移动保持着与鼠标的相对位置。效果如图所示。 15.3 使用图片特效 图片的出现，使得网页变得更加的丰富，图片的特效也不少，图片本身具有的丰富信息加上一些效果，会使得网页更加有吸引力。 15.3.1 图片若隐若现 通过改变图片的透明度，可以使得图片的可见程序能够被JavaScript调节，结合合适的时间间隔，就可以使得图片产生若隐若现的特殊效果。 在本例中，显示的图片主要通过改变其透明度实现若隐若现。效果如图所示。 15.3.2 四处飘浮的小球 本例的效果是一个小球