利用js的Math方法实现一种摇晃的鼠标跟随效果

kos — Mon, 30 Nov 2009 14:16:41 +0000

　　也许这个东西没什么实用价值，但好耍是肯定的，看看下面的效果



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body style="overflow:hidden">  <p><a href="http://www.uideas.cn/download/1.html">点击查看美女图片</a></p> <p> </p> <p><a href="http://www.uideas.cn/download/1.html">点击查看美女图片</a></p> <p> </p> <p><a href="http://www.uideas.cn/download/1.html">点击查看美女图片</a></p> </body> <script language="javascript" type="text/javascript">   var ns=document.getElementById&&!document.all;     var AD = document.getElementById("AD"); var shakeX = 0,shakeY = 0; var stantX = 0,stantY = 0; var ADX = 0,ADY = 0; var ADW = AD.offsetWidth/2; var ADH = AD.offsetHeight/2;    function Ouille(){    	x = Math.round(stantX += (shakeX += ((ADX-stantX-shakeX)*1)/10));    	y = Math.round(stantY += (shakeY += ((ADY-stantY-shakeY)*1)/10));      	AD.style.left = x-ADW;      	AD.style.top = y-ADH;     	setTimeout("Ouille()",5);        	}     	   function momouse(obj){      	ADX=ns? obj.clientX: event.clientX;     	ADY=ns? obj.clientY: event.clientY; }  document.onmousemove=momouse; Ouille(); </script> </html> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　其实在上面的代码中做点小手脚，你就可以看到不同的效果，也许你会用得着。
比如把
　　AD.style.left = x-ADW;
　　AD.style.top = y-ADH;
改成
　　AD.style.left = x;
　　AD.style.top = y;
或其它的，就可以用到其它地方了！

散人笔记 » Math

利用js的Math方法实现一种摇晃的鼠标跟随效果