友意博客 – 利用js的Math方法实现一种摇晃的鼠标跟随效果

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

发布者：kos 发布日期：2009年11月30日 10:16 pm 评论

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

看看下面的效果



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body style="overflow:hidden"> <img src="http://www.uideas.cn/download/block_1.gif" name="AD" id="AD" style=" position: absolute"> <p><a href="http://www.uideas.cn/download/1.html">点击查看美女图片</a></p> <p>&nbsp;</p> <p><a href="http://www.uideas.cn/download/1.html">点击查看美女图片</a></p> <p>&nbsp;</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;
或其它的，就可以用到其它地方了！

来自分类： JavaScript, 网站设计 Tags： Math, setTimeout, 摇晃的鼠标跟随

一	二	三	四	五	六	日
		2010-03月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

站点日历

站内搜索

分类导航

有情链接

站点日历

站内搜索

分类导航

博客标签

有情链接