元素跟着鼠标移动 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 100px;
                height: 100px;
                background-color: #bfa;
                position: relative;
                top:0;
                left: 0;
            }
        </style>
        <script type="text/javascript">
            //实现鼠标在哪box元素跟着动
            window.onload = function(){
                //获取body跟html
                var Boss = document.body || document.documentElement;
                var obox = document.querySelector(".box");
                //给boss添加事件
                Boss.onmousemove = function(e){
                    //兼容性
                    var res = window.e || e;
                    var x = res.clientX - (obox.offsetWidth/2);
                    var y = res.clientY - (obox.offsetHeight/2);
                    //设置box
                    obox.style.left = x +"px";
                    obox.style.top = y +"px";
                    console.log(x,y)
                }
            }
        </script>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

 

posted @ 2022-03-31 11:18  st-159  阅读(57)  评论(0)    收藏  举报