UDN-企业互联网技术人气社区

板块导航

浏览  : 559
回复  : 2

[原生js] JS onmousemove鼠标移动坐标接龙DIV效果实例

[复制链接]
牛娜的头像 楼主
发表于 2017-1-8 13:49:07 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了JS onmousemove鼠标移动坐标接龙DIV效果实例,有需要的朋友可以参考一下

  效果:
20131216170129919.gif
  
  思路:
  
  利用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.             var oEvent = ev || event;       //判断兼容性
  16.             var pos = GetMouse(oEvent);     //确定兼容性后,利用鼠标移动坐标的函数来取得横纵坐标
  17.             for (var i = div.length - 1; i > 0; i--) {      //遍历DIV,从最后一个开始。
  18.                 div[i].style.left = div[i - 1].offsetLeft + 'px';       //将前一个的offsetLeft给后一个
  19.                 div[i].style.top = div[i - 1].offsetTop + 'px';     //将前一个的offsetTop给后一个
  20.             }
  21.             div[0].style.left = pos.x + 'px';       //将鼠标的横坐标给第一个
  22.             div[0].style.top = pos.y + 'px';        //将鼠标的纵坐标给第一个
  23.         }
  24.         function GetMouse(ev) {     //获取鼠标移动的坐标
  25.             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  26.             var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  27.             return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32.     <div>
  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. </body>
复制代码
发表于 2017-1-8 13:49:38 | 显示全部楼层
貌似看过类似的文章恩,排版更清晰点就更好了
使用道具 举报

回复

发表于 2017-1-8 14:28:44 来自手机 | 显示全部楼层
LZ是闲人,天天发帖,坚定完毕
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部