JavaScript原生代码实现鼠标跟随案例（附注释）

骑猪看日落 2022-06-01 08:07 187阅读 0赞

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