js基础_69、div跟随鼠标移动练习

要使用js修改某个元素的偏移量来使其移动，必须要为该元素设置定位，一般都将其设置为绝对定位。

pageX和pageY

可以获取鼠标相对于当前页面的坐标。整个document文档的大小，而不是根据当前可见窗口大小来获取坐标。但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用。

练习

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #btn1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                /*要使用js偏移量使其移动，必须设置定位*/
            }
            #body{
                height: 1500px;
            }
        </style>
        <script>
            window.onload=function(){
                var box1=document.getElementById("btn1");
                document.onmousemove=function(event){
                    event=event||window.event;
                    //var x=event.clientX;
                    var x=event.pageX;
                    var y=event.pageY;
                    //如果一定要使用clientX属性的话，就要想办法解决偏移量的问题，
                    //用scrolltop来计算好滚动了多少距离，然后加再垂直偏移量里就能解决body中出现滚动条导致
                    //元素的坐标与鼠标的坐标不一致的问题。
                    //var st=document.documentElement.scrollTop||document.body.scrollTop;//使用clientX时
                    //var st=document.body.scrollTop;//使用clientX时
                    box1.style.left=x+"px";
                    box1.style.top=y+"px";//box1.style.top=y+st+"px";//使用clientX时
                };
            };
        </script>
    </head>
    <body id="body">
        <div id="btn1"></div>
    </body>
</html>
posted @ 2022-03-12 11:47  青仙  阅读(129)  评论(0)    收藏  举报