zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    18_09_05 textarea高度自适应 和 Z-index
    18_08_20 jQuery 获取URL中的参数
    18_08_20 jQuery 光标聚焦文字之后
    18_08_20 jQuery 将前台 多张图片 和 多个附件 转化为 附件 向后台请求
    18_8_20 Bootstrap ul标题太多的处理方式
    Http (java)的post和get方式
    18_8_20 java 时间延后的通用写法
    iOS设计模式-组合
    iOS设计模式-迭代器
    iOS设计模式-观察者
  • 原文地址:https://www.cnblogs.com/XChWaad/p/4913035.html
Copyright © 2011-2022 走看看