当前位置:编程学习 > JS >>

JavaScript的文字跟随鼠标

<html><head><title>跟随鼠标移动的图片<title><style type="text/css">.spanstyle{ position:absolute; visibility:visible; top:-50px; font-size:13pt; font-family:楷体_GB2312; color:#2010D0; font-weight:bold;}</style></head><body onLoad="makesnake()"><script language="JavaScript"><!-- var x,y; var step=25; 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></body></html>请把他复制下再把错拉找出发过来
答案:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字跟随鼠标移动的效果</title>
<style type="text/css">
/*文字的格式*/
.spanstyle{
position:absolute;
display:none;
top:50px;/*初始化的时候所有的对象均为不可视*/
left:50px;
font-size:9pt;
color:red;
font-weight:200px;
}
</style>
<script type="text/javascript">
var x,y;//定义全局变量保存鼠标的坐标
step=20;
var message="幸福只需要一点点,否则就象是手中握着一把满满的沙子,握的越紧,代表幸福的沙子就会更快的从指尖滑落。";
//把字符串分割成数组
message=message.split("");
var xPosition=new Array();//记录X轴的坐标
var yPosition=new Array();//记录Y轴的坐标
//初始化数组
for(var i=0;i<message.length;i++){
  xPosition[i]=-50;
  yPosition[i]=-50;
 }

//函数-方法得到鼠标当前在页面中的位置
function handlerMouseLocation(){
//得到鼠标相对于页面的位置 防止滚动条的拖动
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
 }
 
  function makesnake(){ //函数文字跟随鼠标浮动的效果的方法
    xPosition[0]=x+step;//在鼠标的X轴的基础之上加上20
	yPosition[0]=y-15;//Y轴和鼠标相同
	
	//依次从后向前赋值达到浮动的效果
	for(var i=message.length-1;i>=1;i--){
	   
	   xPosition[i]=xPosition[i-1]+step;
	   yPosition[i]=yPosition[i-1];
	  }

	  //设定span的位置
	  for(var i=0;i<message.length;i++){
	      var thisspan=eval("span"+(i)+".style");//获得鼠标对象的引用
		  thisspan.display="block";
	      thisspan.pixelTop=yPosition[i]+step;
		  thisspan.pixelLeft=xPosition[i];
	    }
		 setTimeout("makesnake()",10);//延时才能达到浮动的效果
		 setTimeout("ChangeTextColor()",10);
		
	
   }

   function ChangeTextColor(){
    var Initialization=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");

   	  for(var i=0;i<message.length;i++){
	  	var a=Math.round(Math.random()*14+1);
	var b=Math.round(Math.random()*14+1);
	var c=Math.round(Math.random()*14+1);
	var d=Math.round(Math.random()*14+1);
	var e=Math.round(Math.random()*14+1);
	var f=Math.round(Math.random()*14+1);
	      var thisspan=eval("span"+(i)+".style");//获得鼠标对象的引用
		  var ww=Initialization[a]+""+Initialization[b]+""+Initialization[c]+""+Initialization[d]+""+Initialization[e]+""+Initialization[f];
		  thisspan.color="#"+ww;
		  document.getElementById("my").innerText="#"+ww;
	    }
    }
</script>
</head>

<body>
<script type="text/javascript">
//将span内容写到界面上
for(var i=0;i<message.length;i++){
  document.write("<span id='span"+i+"' class='spanstyle'>");
  document.write(message[i]);
  document.write("</span>");
  }
  document.onmousemove=handlerMouseLocation;
  makesnake();//调用方法
</script>
<span id="my"></span>
</body>
</html>
其他:<html>
<head><title>asd</title>
<style type="text/css">
.spanstyle {
	position: absolute;
	visibility: visible;
	top: -50px;
	font-size: 13pt;
	color: #2010D0;
	font-weight: bold;
}
</style>
<script>
var x,y;  
var step=25;  
var flag=0;  
var message="Welcome to net Home!";  
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)    
}
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>
<body onload="makesnake()">
</body>
</html> 1111 

上一个:哪位高手帮帮我,看一下我的javascript为什么不起作用?貌似不提交结果?很着急,谢谢!
下一个:用javascript,在定义输入框的判定的时候,如何来限定输入空格或者删除输入的空格?

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,