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>

  • 相关阅读:
    Java设计模式-装饰器模式
    【c++内存分布系列】单独一个类
    【转】LCS
    快速排序
    冒泡排序
    选择排序
    多线程读取全局变量
    【转】一致性hash算法(consistent hashing)
    【转】五笔的字典序编码与解码
    给定一个函数rand()能产生0到n-1之间的等概率随机数,问如何产生0到m-1之间等概率的随机数?
  • 原文地址:https://www.cnblogs.com/XChWaad/p/4913035.html
Copyright © 2011-2022 走看看