JavaScript原生代码实现鼠标跟随案例（附注释）_鼠标跟跟随案例的代码-CSDN博客

本文链接：https://blog.csdn.net/shenkeding9350/article/details/79152649

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标跟随案例</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 5000px;
        }
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: #aaaaaa;
            border-radius: 7px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
    </style>
    <script>


        window.onload =function () {
            //获取相关元素
            var box = document.getElementsByClassName("box")[0];
            var timer = null;
            // animate(box,y);
            var tarx = 0;var tary = 0;
            var leaderx = 0; var leadery = 0;
            document.onmousemove = function (event) {
                //兼容低版本IE的事件对象写法
                event = event||window.event;
                var x = event.pageX||scroll().left+event.clientX;
                var y = event.pageY||scroll().top+event.clientY;

                //让鼠标在box中心
                tarx = x-25; tary = y-25;

                //使用定时器之前，清除定时器，以免出现bug
                clearInterval(timer);

                //开启定时器
                timer = setInterval(function () {

                    //x方向的动画处理部分
                    leaderx = box.offsetLeft;
                    var speedx = (tarx-leaderx)/10;
                    speedx = speedx>0?Math.ceil(speedx):Math.floor(speedx);
                    leaderx = leaderx+speedx;
                    box.style.left = leaderx+"px";

                    //y方向的动画处理部分
                    leadery = box.offsetTop;
                    var speedy = (tary-leadery)/10;
                    speedy = speedy>0?Math.ceil(speedy):Math.floor(speedy);
                    leadery = leadery+speedy;
                    box.style.top = leadery+"px";

                    //判断是否需要清除定时器  注意：此处不清除定时器会有bug，效果可自行注释掉；
                    if(Math.abs(tarx-box.offsetLeft)<=Math.abs(speedx)&&Math.abs(tary-box.offsetTop)<=Math.abs(speedy)){
                        box.style.left = tarx+"px";
                        box.style.top = tary+"px";
                        clearInterval(timer);
                    }

                },15);
            }



            //scroll兼容性封装
            function scroll() {
                return {
                    "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
                    "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
                }
            }


        }
    </script>
</head>
<body>
    <div class="box">1</div>
</body>
</html>