JS鼠标跟随效果

效果实现分析:

第一步:这是一个鼠标点击事件,当鼠标点击屏幕的任何位置时,图片会跟随着移动,此时要获取鼠标点击某个位置的坐标,用  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>

猜你喜欢

转载自blog.csdn.net/m0_37058714/article/details/81084828