| | | 精彩Script解读－跟随鼠标的文字特效 | | 2001-09-05·
·听风··yesky
| 1 2 3 下一页 现在的Web世界丰富多彩，花样繁多，今天我来给大家介绍一种有趣的文字效果：跟随鼠标的水波纹文字。就是说，当鼠标在页面上滑过时，会有一串文字如水波纹似的跟随。先看看实际的效果。
实现思路
1、当鼠标移动到一个新位置时，信息要跟随到这里。为了即时扑捉到坐标值，要将鼠标的移动事件onmousemove附值一个函数Mouse，在其中计算出显示信息的新位置。Event是页面中所发生的事件对象，在这个函数中，event.y表示发生鼠标移动事件时鼠标所在的Y坐标，event.x表示x坐标。为了将显示的信息距离鼠标一定的距离，将event.x增加20附值给xmouse，event.y则直接附值给ymouse。这样，xmouse与ymouse就即时对应了鼠标的当前位置。
2、为了实现信息的单个字符逐渐波动效果，要为信息字符串中的每个字符（包括空格）建立一个层。初始状态时，每个层的位置都一样，位于左上角。代码如下：
for (i=0; i ＜ n; i++)
document.write('＜div id="iemsg" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center"＞'+props+msg[i]+'＜/font＞＜/div＞');
其中，n表示字符串的长度，在代码段的最前面进行了附值。
3、为了将这些每个字符所在层全部框于一个范围中，在其外又定义了2个层：
document.write('＜div id="outer" style="position:absolute;top:0px;left:0px"＞＜div style="position:relative"＞');
…
document.write('＜/div＞＜/div＞');
4、当鼠标移动到新位置时，我们可以从xmouse和ymouse得到显示信息的新起始坐标。Ymouse就是所有显示字符串信息的y坐标，xmouse为第一个字符的x坐标，其他字符的x坐标可以通过增加字符显示宽度值来获取。但是，如果直接将这些计算后的x、y坐标附值给每个字符的层top、left属性，就会造成字符串从旧位置一步到位至新地方的效果（代码中speed＝1时），不会形成一浪接一浪的水波纹效果。为此，要设定每个字符移动过程中的速率与步长。在这里，我们将x方向与y方向的移动步长分别设定为新、旧位置x落差和y落差的一半，也就是代码中的speed＝0.5。这样，每个字符在x方向与y方向上的移动步长依次成为当前落差的一半、一半的一半、一半的一半的一半……也就是说，步长依次减半，最终抵达新位置。这段代码设计的很精妙，值得玩味：
Y[0]=Y[0]+(ymouse-Y[0])*speed;
y[0]=Math.round(Y[0]);
X[0]=X[0]+(xmouse-X[0])*speed;
x[0]=Math.round(X[0]);
for (var i=1; i ＜ n; i++){
Y[i]=Y[i]+(y[i-1]-Y[i])*speed;
y[i]=Math.round(Y[i]);
X[i]=X[i]+(x[i-1]-X[i])*speed;
x[i]=Math.round(X[i]);
}
5、为了实现移动过程的连贯性，我们使用setTimeout函数设定x、y坐标计算函数的执行周期。并且，使用window.onload=ripple语句在首次调用页面时启动它。 1 2 3 下一页 | | | 感谢
访问天极网，如果您觉得该文章涉及版权问题，请看这里！
|
|
