|
|
用JavaScript让主页上的文字飞舞
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
广告招租，e-mail:yesize@hotmail.com 动态主页是每一个拥有自己主页的页面制作人员的梦想。下面我们为您介绍的文章，带来的是让您主页上的文字飞舞起来的特效方法。 现在动态主页大行其道，很多朋友都想在自己的主页里加入一些新奇的效果，我们这里说的是一个通过 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就是我的宣传文字，把它改成你想显示的文字就成，还支持中文呢，是不是很棒？
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
加入最爱
热门小游戏分类 
