JS鼠标跟随效果
程序员文章站
2022-06-01 18:38:29
...
效果实现分析：
第一步：这是一个鼠标点击事件，当鼠标点击屏幕的任何位置时，图片会跟随着移动，此时要获取鼠标点击某个位置的坐标，用 event 对象来获取，首先获取X轴方向的某个值：var eX=event.clientX;再获取Y轴方向的某个值，var eY=event.clientY;
第二步：获取图片随之移动的位置
第三步：代码实现
<body>
<img src="images/img.gif" alt="" id='img'>
<script>
var headerX=0;
var targetX=0;
var headerY=0;
var targetY=0;
document.onclick=function(event){
//先获取鼠标点击屏幕的坐标
var eX=event.clientX;
var eY=event.clientY;
//图片需在X和Y轴两个方向移动的位置
var translateY=eY-(img.offsetHeight/2+img.offsetTop);
var translateX=eX-(img.offsetWidth/2+img.offsetLeft);
//改变目标值
targetX=translateX;
targetY=translateY;
}
setInterval(function(){
headerX=headerX+(targetX-headerX)/20;
headerY=headerY+(targetY-headerY)/20;
img.style.transform="translate3d("+headerX+"px,"+headerY+"px,0)";
},20);
</script>
</body>