精彩Script解读－跟随鼠标的文字特效

现在的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语句在首次调用页面时启动它。

　　代码详解

＜HEAD＞

＜SCRIPT LANGUAGE="JavaScript"＞

＜!-
// 对显示信息、字体、大小和颜色的变量附值
msg="跟 随 鼠 标 的 水 波 纹 文 字 特 效";
font="Verdana,Arial";
size=2; // 1-7 only!
color="#0000ff";

// 字符的每次移动步长率
speed=0.5;
// 试一试将此处修改为speed＝1，看看一步到位的效果

// 将字符串msg分割成字符串数组msg
msg=msg.split("");
// 将字符串数组长度附值给变量n
n=msg.length;

// 将每个字符的显示宽度附值给变量a
a=size*5;

// 鼠标初始位置附值为0
ymouse=0;
xmouse=0;

// 每个字符显示的控制信息
props="＜font face="+font+" size="+size+" color="+color+"＞";

// 定义信息显示范围层outer
document.write("＜div id="outer" style="position:absolute;top:0px;left:0px"＞＜div style="position:relative"＞");

// 为显示信息的每个字符定义一个层，初始位置都位于左上角
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＞");

document.write("＜/div＞＜/div＞");

// 鼠标移动事件onmousemove的接管函数
// 获取当前鼠标位置，并为x增加20，生成显示信息的起始位置
function Mouse(){
ymouse = event.y;
xmouse = event.x+20;
}

// 为鼠标移动事件附值函数mouse
document.onmousemove=Mouse;

// 生成4个数组，表示字符移动的新位置坐标
y=new Array();
x=new Array();
Y=new Array();
X=new Array();

// 初始全部附值为0
for (i=0; i ＜ n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

// 主控制函数
// 渐次计算出移动的目标位置，附值给显示信息的top、left坐标
function ripple(){

// 计算显示信息中第一个字符的当前移动目标位置坐标
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]);
}

// 将移动位置坐标附值给每个字符层的top、left属性
outer.style.top=document.body.scrollTop;
for (i=0; i ＜ n; i++){
d=iemsg[i].style;
d.top=y[i];
d.left=x[i]+i*a;
}

// 设定此函数的执行周期
setTimeout("ripple()",10);
}

// 在窗口加载时，运行主控制函数
window.onload=ripple;

--＞
＜/script＞

＜center＞
＜font face="arial, helvetica" size"-2"＞跟 随 鼠 标 的 水 波 纹 文 字 特 效＜/font＞
＜/center＞