用JavaScript让主页上的文字飞舞

动态主页是每一个拥有自己主页的页面制作人员的梦想。下面我们为您介绍的文章，带来的是让您主页上的文字飞舞起来的特效方法。

现在动态主页大行其道，很多朋友都想在自己的主页里加入一些新奇的效果，我们这里说的是一个通过 javascript 实现的跟随光标的文字飞舞。浏览的效果是光标在页面不动时，光标指向右边一行不动的文字，此段文字就是会飞的，具体内容根据个人喜好了。

当光标移动的时候，第一个字开始沿光标移动的位置再次靠近光标，依次第二个字，第三个字，有一定的延时性，所以看起来就有波浪的感觉，非常的酷！而且对于页中其他元素无任何影响，当其处于编辑状态它是不显示的，就和一个空白页一样，可进行正常的编辑。区别于有些动态效果，作为 object 在编辑状态占一定空间，而在浏览状态则是动态改变的，所以会对正常编写的元素定位造成一些影响！

我将其中的所有代码列出，各位只需把飞舞的文字改成自己的就成，而对于其他代码则不要做任何修改。这些飞舞的文字在编辑状态是不出现的，怎么样？够体贴吧！好，赶紧开始吧, 全部源代码如下 :

〈html〉

〈head〉

〈title〉the fly font!〈/title〉

〈meta http－equiv=″content－type″ content=″text/html; charset=gb2312″〉

〈style〉

.spanstyle {

position:absolute;

visibility:visible;

top:－50px;

font－size:10pt;

font－family:verdana;

font－weight:bold;

color:black;

}

〈/style〉

〈script〉

/＊

cursor trailor text－ by only

＊/

var x,y

var step=10

var flag=0

// your snappy message. important: the space at the end of the sentence!!!

var message=″ only art－about design ″

message=message.split(″ ″)

var xpos=new array()

for (i=0;i〈=message.length－1;i＋＋) {

xpos=－50

}

var ypos=new array()

for (i=0;i〈=message.length－1;i＋＋) {

ypos=－50

}

function handlermm(e){

x = (document.layers) ? e.pagex : document.body.scrollleft＋event.clientx

y = (document.layers) ? e.pagey : document.body.scrolltop＋event.clienty

flag=1

}

function makesnake() {

if (flag==1 ＆＆ document.all) {

for (i=message.length－1; i〉=1; i－－) {

xpos=xpos[i－1]＋step

ypos=ypos[i－1]

}

xpos[0]=x＋step

ypos[0]=y

for (i=0; i〈message.length－1; i＋＋) {

var thisspan = eval(″span″＋(i)＋″.style″)

thisspan.posleft=xpos

thisspan.postop=ypos

}

}

else if (flag==1 ＆＆ document.layers) {

for (i=message.length－1; i〉=1; i－－) {

xpos=xpos[i－1]＋step

ypos=ypos[i－1]

}

xpos[0]=x＋step

ypos[0]=y

for (i=0; i〈message.length－1; i＋＋) {

var thisspan = eval(″document.span″＋i)

thisspan.left=xpos

thisspan.top=ypos

}

}

var timer=settimeout(″makesnake()″,30)

}

〈/script〉

〈script language=″javascript″〉

〈!－－

function launch(newurl, newname, newfeatures, orgname) {

var remote = open(newurl, newname, newfeatures);

if (remote.opener == null)

remote.opener = window;

remote.opener.name = orgname;

return remote;

}

function launchremote() {

myremote = launch(″flash/start.html″, ″myremote″, ″height=380,width=572,channelmode=0,dependent=0,directories=0,fullscreen=0, 
location=0,menubar=0,resizable=0,scrollbars=0,status=0,toolbar=0″,titlebar=1, ″mywindow″);

}

// －－〉

〈/script〉

〈/head〉

〈body onload=″makesnake()″ style=″width:100％;overflow－x:hidden;overflow－y:scroll″ bgcolor=″＃ffffff″〉

〈script language=″ ″〉

〈!－－ beginning of javascript －

for (i=0;i〈=message.length－1;i＋＋) {

document.write(″〈span id=′span″＋i＋″′ class=′spanstyle′〉″)

document.write(message)

document.write(″〈/span〉″)

}

if (document.layers){

document.captureevents(event.mousemove);

}

document.onmousemove = handlermm;

// － end of javascript － －－〉

〈/script〉

〈/body〉

〈/html〉  

你只需要将这些代码拷贝下来，然后保存为＊.htm 或 ＊.html 就可以了。注意代码的第27行 var message=″ only art － about design ″ 里面 only art － about design就是我的宣传文字，把它改成你想显示的文字就成，还支持中文呢，是不是很棒？
php爱好者站 http://www.phpfans.net PHP|MySQL|javascript|ajax|html.