欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS鼠标跟随效果

程序员文章站 2022-06-01 18:38:29
...

JS鼠标跟随效果

效果实现分析:

第一步:这是一个鼠标点击事件,当鼠标点击屏幕的任何位置时,图片会跟随着移动,此时要获取鼠标点击某个位置的坐标,用  event 对象来获取,首先获取X轴方向的某个值:var  eX=event.clientX;再获取Y轴方向的某个值,var   eY=event.clientY;

第二步:获取图片随之移动的位置

JS鼠标跟随效果

第三步:代码实现

<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>