DHTML Mouse Trailor with Text Script

最新推荐文章于 2015-05-04 08:46:24 发布

xuehouniao

最新推荐文章于 2015-05-04 08:46:24 发布

阅读量960

点赞数

CC 4.0 BY-SA版权

分类专栏： DHTML 文章标签： function javascript action class html

本文链接：https://blog.youkuaiyun.com/xuehouniao/article/details/288151

DHTML 专栏收录该内容

10 篇文章

订阅专栏

介绍了一款经典鼠标轨迹脚本，它能让指定文本跟随鼠标指针移动。可通过更改 message 变量配置文本内容，编辑.trail_style 样式表代码修改文本样式，如字体、颜色、大小等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

This classic mouse trail script allows you to put the text of your choice along side the mouse pointer, and follow the users movement round the screen.

To configer the text, simply change the message variable (currently 'I Love You').

If you want to change the style of the text, simply edit the style sheet code, where it says .trail_style

You can change font, color, size and all the usual text variations.

See the Mouse Trail in action

Select All Code

<html>
<head>
<script language="Javascript">

var x,y; 
var gap_between=10;
var checkit=0;
var speed=40;
var message="I Love You";
message=message+' ';

 
message=message.split("") ;
 
var xposition=new Array() ;

for (i=0;i<=message.length-1;i++) { 
        xposition[i]=-100
} 
 
var yposition=new Array() 
for (i=0;i<=message.length-1;i++) { 
           yposition[i]=-100
} 
 
function doMouseMove(e){ 
if(document.layers) {
	   x=e.pageX 
	   y=e.pageY
	   }
else
{
	   x=document.body.scrollLeft+event.clientX ;
	   y=document.body.scrollTop+event.clientY; 
}
 
checkit=1 
 
} 
 
function DoTrail() { 
           if (checkit==1 && document.all) { 
	              for (i=message.length-1; i>=1; i--) { 
	                                xposition[i]=xposition[i-1]+gap_between 
	                                 yposition[i]=yposition[i-1] 
	           } 
	
	           xposition[0]=x+gap_between 
	           yposition[0]=y 
	         
	           for (i=0; i<message.length-1; i++) { 
	                      var thisspan = eval("span"+(i)+".style") 
	                      thisspan.posLeft=xposition[i] 
	                      thisspan.posTop=yposition[i] 
	              } 
           } 
         
           else if (checkit==1 && document.layers) { 
           for (i=message.length-1; i>=1; i--) { 
                              xposition[i]=xposition[i-1]+gap_between 
                              yposition[i]=yposition[i-1] 
           } 
        
	   xposition[0]=x+gap_between 
            yposition[0]=y 
         
            for (i=0; i<message.length-1; i++) { 
                      var thisspan = eval("document.span"+i) 
                      thisspan.left=xposition[i] 
                      thisspan.top=yposition[i] 
           } 
           } 
                      var count_time=setTimeout("DoTrail()",speed) 
 } 
</script>
<style type="text/css">

.trail_style{
	position:absolute;
	visibility:visible;
	top:-100px;
	font-size:12px;
	font-family:Verdana, Arial;font-weight:bold;
	color:#000000;}  
</style>


</head>
<BODY onLoad='DoTrail();'>





<script>
 
for (i=0;i<=message.length-1;i++) { 
       document.write("<span id='span"+i+"' class='trail_style'>") 
           document.write(message[i]) 
       document.write("</span>") 
} 
 
if (document.layers){ 
        document.captureEvents(Event.MOUSEMOVE); 
 
} 
document.onmousemove = doMouseMove; v
</script>
</body>
</html>