div随鼠标在浏览器的窗口任意移动 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            #box1{
                width: 100px;  /*宽度为100px*/
                height: 100px; /*高度为100px*/
                background-color:red; /*背景颜色*/

                /* 
                开启box1的绝对定位
                */
                position: absolute;

            }
        </style>
        <script type="text/javascript">
            window.onload=function(){

            /* --------使div可以跟鼠标移动----------- */

            // 获取box1
            var box1=document.getElementById("box1");
            // 绑定鼠标移动事件
            document.onmousemove=function(event){//窗口移动
            // box1.onmousemove=function(event){//只限可见窗口移动


                // alert(123);//测试

                // 解决兼容问题
                event = event ||window.event;

                // 获取滚动条的距离
                /* 
                    chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
                    火狐等浏览器认为浏览器的滚动条是html的
                */

                //  var st = document.body.scrollTop
                var st=document.body.scrollTop||document.documentElement.scrollTop;
                var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
            
                console.log(st);



                // 获取到鼠标的坐标
                /* clientX和clientY
                        用于获取鼠标在当前的可见窗口的坐标
                        div的偏移量，是相对于整个页面的

                    pageX和pageY
                        可以获取鼠标对于当前页面的坐标
                            // 但是这个两个属性在IE8中不支持，所以需要兼容IE8，则不要使用
                */
                var left=event.clientX;
                var top=event.clientY;
                // var left = event.pageX;
                // var top=event.pageY;


                // 设置div的偏移量
                box1.style.left=left + sl +"px";
                box1.style.top=top +st +"px";

            }
            };
        </script>
    </head>
    <body style="height: 1000px; width: 2000px;">
        <div id="box1"></div>
    </body>
    </html>

 

posted @ 2020-11-30 19:24  Hhhr  阅读(196)  评论(0)    收藏  举报