原生js实现鼠标跟随效果
话不多说,请看代码:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>鼠标跟随效果</title> <styletype="text/css"> *{margin:0;padding:0;} img{position:absolute;top:0;left:0;} </style> </head> <body> <imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=21984166dad229792b21c2e1277bece5"height="50"width="50"alt=""id="img"> </body> <scripttype="text/javascript"> (function(window){ //获取对象 varimg=document.getElementById("img"); //为页面添加单击事件,鼠标点击时图片滑动到鼠标所在位置 document.onclick=function(event){ varevent=event||window.event; //获取鼠标在页面上的坐标 varpageX=event.pageX||event.clientX+document.documentElement.scrollLeft; varpageY=event.pageY||event.clientY+document.documentElement.scrollTop; //减去图片自身宽高的一半,使鼠标在图片中间 pageX=pageX-img.offsetWidth/2; pageY=pageY-img.offsetWidth/2; animate(img,{"left":pageX,"top":pageY}); }; //封装缓动函数 functionanimate(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ varflog=true; for(kinjson){ if(k==="zindex"){ obj.style[k]=json[k]; }elseif(k==="opacity"){ varleader=getStyle(obj,k)*100; vartarget=json[k]*100; varstep=(target-leader)/10; step=step>0?Math.ceil(step):Math.floor(step); leader=leader+step; obj.style[k]=leader/100; }else{ varleader=parseInt(getStyle(obj,k)); vartarget=json[k]; varstep=(target-leader)/10; step=step>0?Math.ceil(step):Math.floor(step); leader=leader+step; obj.style[k]=leader+"px"; }; if(leader!==target){ flog=false; } } if(flog){ clearInterval(obj.timer); if(fn){ fn(); }; }; },15) }; //封装获取计算后样式的函数 functiongetStyle(obj,attr){ if(window.getComputedStyle){ returnwindow.getComputedStyle(obj,null)[attr]; }else{ returnobj.currentStyle[attr]; }; }; })(window) </script> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!