始终跟随鼠标移动的文字纯JS脚本实现

发布时间：2018-08-13 15:22 所属栏目：121 来源：站长网

导读：

导读：记得在很久以前，大约2009年9月的时候烈火网给大家分享过一个跟随鼠标的彩色文字特效，这么久的事情，真的不记得了！但是昨天晚上有站长来咨询小编，他想要一款非彩色文字的鼠标文字跟随，大概改了改再分享给大家吧！这是纯 Java Script，您可以放在BODY之

　　记得在很久以前，大约2009年9月的时候烈火网给大家分享过一个跟随鼠标的彩色文字特效，这么久的事情，真的不记得了！但是昨天晚上有站长来咨询小编，他想要一款非彩色文字的鼠标文字跟随，大概改了改再分享给大家吧！这是纯JavaScript，您可以放在BODY之间，也可以放在JS中使用。

　　演示：

<html> <head> <title>随鼠标移动的文字-预览特效</title> </head> <body onLoad="makesnake()" ><style type="text/css"> .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:9pt; color: #000000; }</style> <script> var x,y var step=10 var flag=0 var message="欢迎来到烈火网，请提出宝贵意见！"//修改要显示的文字 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> 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; </script> <p align="center" style="line-height: 20px">跟随鼠标移动的文字！好看吗？相关特效：<a href="http://www.veryhuo.com/a/view/8863.html">跟随鼠标的彩色文字</a>！</p> <hr size="1" noshade width="100%" color="red"> <p align="center" style="line-height: 20px"> <font face="Arial, Helvetica, sans-serif" color="#666666"></font>　 </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：ASP站长网）

始终跟随鼠标移动的文字 纯JS脚本实现

始终跟随鼠标移动的文字纯JS脚本实现