由 amtd 发布于: 2001-02-20 09:30

让主页上的文字飞舞




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

　　现在动态主页大行其道，很多朋友都想在自己的主页里加入一些新奇的效果，我们这里说的是一个通过 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[i]=－50

　　}

　　var ypos=new Array()

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

ypos[i]=－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[i]=xpos[i－1]＋step

ypos[i]=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[i]

thisspan.posTop=ypos[i]

　　 }

}

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

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

xpos[i]=xpos[i－1]＋step

　　ypos[i]=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[i]

thisspan.top=ypos[i]

　　 }

}

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[i])

　　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就是我的宣传文字，把它改成你想显示的文字就成，还支持中文呢，是不是很棒？




（作者：小王　2000年03月16日 15:49）
__________________