js的鼠标跟随

<style>
        .a{width: 100px;height: 100px;background-color: #000;position: absolute;}
        /* body{width: 2000px;height: 2000px;} */
    </style>

<div class="a"></div>
    <script>
        var a = document.querySelector('.a');
        document.addEventListener('mousemove',function(e){
            var maxWidth = document.documentElement.clientWidth - a.offsetWidth;
            var maxHeight = document.documentElement.clientHeight - a.offsetHeight;
            console.log(maxWidth,maxHeight)
            // 距离浏览器窗口的距离
            // console.log(e.clientX,e.clientY)
            // 距离页面的距离  --- 包含被卷去的宽度
            // console.log(e.pageX,e.pageY)
            var x = e.pageX - a.offsetWidth / 2;
            var y = e.pageY - a.offsetHeight / 2;
            if(x < 0){
                x = 0
            }
            if(y < 0){
                y = 0
            }
            if(x > maxWidth){
                x = maxWidth;
                console.log(e.pageX)
            }
            if(y > maxHeight){
                y = maxHeight;
            }
            a.style.left = x + 'px';
            a.style.top = y + 'px';
        })    
    </script>