zoukankan      html  css  js  c++  java
  • 点滴积累【JS】---JS小功能(onmousemove鼠标移动坐标接龙DIV)

    效果:

    思路:

    利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV。

    代码:

     1 <head runat="server">
     2     <title></title>
     3     <style type="text/css">
     4         div
     5         {
     6             width: 20px;
     7             height: 20px;
     8             background: #00FFFF;
     9             position: absolute;
    10         }
    11     </style>
    12     <script type="text/javascript">
    13         document.onmousemove = function (ev) {
    14             var div = document.getElementsByTagName('div');
    15 
    16             var oEvent = ev || event;       //判断兼容性
    17             var pos = GetMouse(oEvent);     //确定兼容性后,利用鼠标移动坐标的函数来取得横纵坐标
    18             for (var i = div.length - 1; i > 0; i--) {      //遍历DIV,从最后一个开始。
    19                 div[i].style.left = div[i - 1].offsetLeft + 'px';       //将前一个的offsetLeft给后一个
    20                 div[i].style.top = div[i - 1].offsetTop + 'px';     //将前一个的offsetTop给后一个
    21             }
    22             div[0].style.left = pos.x + 'px';       //将鼠标的横坐标给第一个
    23             div[0].style.top = pos.y + 'px';        //将鼠标的纵坐标给第一个
    24         }
    25         function GetMouse(ev) {     //获取鼠标移动的坐标
    26             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    27             var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    28             return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
    29         }
    30     </script>
    31 </head>
    32 <body>
    33     <div>
    34     </div>
    35     <div>
    36     </div>
    37     <div>
    38     </div>
    39     <div>
    40     </div>
    41     <div>
    42     </div>
    43     <div>
    44     </div>
    45     <div>
    46     </div>
    47     <div>
    48     </div>
    49     <div>
    50     </div>
    51     <div>
    52     </div>
    53     <div>
    54     </div>
    55     <div>
    56     </div>
    57     <div>
    58     </div>
    59 </body>
  • 相关阅读:
    滚动条滑至底部自动加载内容
    curl请求https请求
    JS根据经纬度获取地址信息
    php结合md5的加密解密算法实例
    php gzcompress() 和gzuncompress()函数实现字符串压缩
    html视频播放器的代码 及其参数详解
    phpcms 整合 discuz!
    phpcms V9 整合 Discuz! X2 教程
    中国各省打架排行榜
    jQuery获取输入框并设置焦点
  • 原文地址:https://www.cnblogs.com/xinchun/p/3452829.html
Copyright © 2011-2022 走看看