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>

  • 相关阅读:
    利用 fsockopen() 函数开放端口扫描器
    oracle如何返回列名作为第一条数据简单解决
    redis
    MYSQL
    JUC 多线程
    java单例模式六种实现方式
    java.net.URISyntaxException 问题解决
    Calender类——字段值介绍
    Dorado开发——树形下拉框
    Java—— 一点关于String的转换
  • 原文地址:https://www.cnblogs.com/XChWaad/p/4913035.html
Copyright © 2011-2022 走看看