元素跟着鼠标移动

复制代码
<!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 @   st-159  阅读(50)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示