php文字鼠标,Linux_精彩Script解读－跟随鼠标的文字特效，现在的Web世界丰富多彩，花样 - phpStudy...

精彩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.οnlοad=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.οnmοusemοve=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.οnlοad=ripple;

--＞

＜/script＞

＜center＞

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

＜/center＞

本文作者:相关阅读:

Win7收藏夹无法展开怎么办？

Oracle数据库的Jobs创建语句如下：

IE 当eval遇上function的处理

在ASP.net中保存/取出图片入/从SQL数据库

首届世界CSS设计大赛结果揭晓

建议网页开发者使用IE8测试版测试网站

去除HTML代码中所有标签的两种方法

javascript对象与数组参考大全(15)

javascript showModalDialog模态对话框使用说明

PHP 正则表达式验证中文的问题

文章内页类

ul结合CSS制作网页相册滑动浏览效果

用 ajax 的方法解决网页广告显示的问题

CSS3属性box-shadow使用详细教程