• js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs


    一、获取鼠标坐标

      clientX:鼠标到可视区边缘的距离;    scrollLeft:滚动条到页面顶端的距离(不可视区的距离)

      兼容性写法:

      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

    跟随鼠标移动的divs,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
        <style>
            div {
                10px;
                height: 10px;
                background: #F00;
                position: absolute;
            }
        </style>
        <script>
            window.onload = function () {
                document.onmousemove = function (ev) {
                    var oEvent = ev || event;
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    var oDivs = document.getElementsByTagName("div");

                    oDivs[0].style.left = oEvent.clientX + scrollLeft + "px";
                    oDivs[0].style.top = oEvent.clientY + scrollTop + "px";

                    for (var i = oDivs.length - 1; i > 0; i--) {
                        oDivs[i].style.left = oDivs[i - 1].style.left;
                        oDivs[i].style.top = oDivs[i - 1].style.top;
                    }
                }

            }
        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
    </html>

  • 相关阅读:
    浏览器打开developers.weixin.qq.com开头的网站加载特别慢或者无法打开
    微信小程序在微信开发者工具中打开时为何提示“小程序重启耗时过久,请确认业务逻辑中是否有复杂运算,或者死循环”?
    解决VMware Workstation 15 与Device/Credential Guard不兼容的问题
    Gitee同步项目后内容一致MD5不同
    Python2.7安装easy_install和pip
    php连接数据库
    css画三角形
    css的9个常用选择器
    Javafx弹窗
    javafx将数据库内容输出到tableview表格
  • 原文地址:https://www.cnblogs.com/XChWaad/p/4913035.html
Copyright © 2020-2023  润新知