原生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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！