div随着鼠标移动而移动练习

最新推荐文章于 2021-08-07 22:46:52 发布

407指导员

最新推荐文章于 2021-08-07 22:46:52 发布

阅读量270

点赞数

分类专栏： javascript 文章标签： js 定位

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109567677

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

div随着鼠标移动而移动练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>112-div随鼠标移动练习</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute; /*设置div的偏移量,还要开启定位才行*/
        }
    </style>

    <script>
        window.onload = function () {
            /**
             * div标签可以随着鼠标移动
             */
            var box1 = document.getElementById("box1");
            //绑定鼠标移动事件给整个页面而非这个盒子
            document.onmousemove = function (event) {
                //解决兼容性问题
                event = event || window.event;
                /**
                 *pageX可以获取鼠标相对于整个页面的横坐标
                 *pageY可以获取鼠标相对于整个页面的纵坐标
                 * 但是不支持ie8及以下。
                 * 在谷歌浏览器中认为滚动条是body的，可以通过body.scrollTop来获取
                 * 但是火狐和ie认为浏览器的滚动条是html的，
                 * 通过document.documentElement.scrollTop获取
                 * 兼容性问题
                 */
                var st = document.documentElement.scrollTop || document.body.scrollTop;
                var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
                //获取鼠标坐标
                var left = event.clientX;
                var top = event.clientY;
                // var left = event.pageX;
                // var top = event.pageY;


                box1.style.left = left+ sl + "px";
                box1.style.top = top + st + "px";
            };

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

在这里插入图片描述

/**
 *div是相当于页面移动（页面可能大于浏览器显示范围产生滚轮）
 * 然而鼠标只是对于这个浏览器可见页面移动 (浏览器默认显示的那块区域)
 */

在这里插入图片描述

注意点：

1，首先是div移动是相对于整个页面的，包括滚轮下边的未显示页面，而我们能看到的页面大小是固定的，可以用鼠标移动的页面是相对浏览器显示的部分。

2.之前在其他样式相关属性中学到了，scrollTop/clientX等用法。

3,竞争防止垄断，但是竞争同样会带来麻烦哈，兼容性问题让人头大。

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div随着鼠标移动而移动练习

div随着鼠标移动而移动练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>112-div随鼠标移动练习</title> <style> #box1 { width: 100px; height: 100px; backg
复制链接

扫一扫

专栏目录