html5实现鼠标跟随

《html5实现鼠标跟随》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Html5实现鼠标跟随，纯js代码，没有flash或者图片之类的，chrome浏览器，firefix或者ie9以上支持。代码很容易看懂效果图：源代码：vardata=0;window.onload=function(){C=Math.cos;S=Math.sin;U=0;w=window;j

2、=document;d=j.getElementById("c");c=d.getContext("2d");W=d.width=w.innerWidth;H=d.height=w.innerHeight;c.fillRect(0,0,W,H);c.globalCompositeOperation="lighter";c.lineWidth=0.2;c.lineCap="round";varcount=0;varbool=0,t=0;//thetavarfun=function(e){if(windo

3、w.T){clearTimeout(T);count=0;if(D==9){D=Math.random()*15;f();}}X=e.pageX;Y=e.pageY;a=0;b=0;A=X;B=Y;R=(e.pageX/W*999>>0)/999;r=(e.pageY/H*999>>0)/999;U=e.pageX/H*360>>0;D=9;g=360*Math.PI/180;f=function(e){count++;c.save();c.globalCompositeOperation="sour

4、ce-over";if(e!=1){c.fillStyle="rgba(0,0,0,0.04)";c.fillRect(0,0,W,H);}c.restore();i=25;if(count<=data){while(i--){c.beginPath();if(D>450

5、

6、bool){if(!bool){bool=1;}if(D<0.1){bool=0;}t-=g;D-=0.1;}if(!bool){t+=g;D+=0.1;}q=(R/r-1)*t;x=(R-r)*C(t)+D*C(q)+(A+(X

7、-A)*(i/25))+(r-R);y=(R-r)*S(t)-D*S(q)+(B+(Y-B)*(i/25));if(a){c.moveTo(a,b);c.lineTo(x,y);}c.strokeStyle="hsla("+(U%360)+",100%,50%,1)";c.stroke();a=x;b=y;}}U-=0.5;A=X;B=Y;};T=setInterval(f,10);};d.onmousemove=function(e){data=2;fun(e);};};

8、d>