效果：

思路：

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

代码：

 <head runat="server">

     <title></title>

     <style type="text/css">

         div

         {

             width: 20px;

             height: 20px;

             background: #00FFFF;

             position: absolute;

         }

     </style>

     <script type="text/javascript">

         document.onmousemove = function (ev) {

             var div = document.getElementsByTagName('div');

             var oEvent = ev || event;       //判断兼容性

             var pos = GetMouse(oEvent);     //确定兼容性后，利用鼠标移动坐标的函数来取得横纵坐标

             for (var i = div.length - 1; i > 0; i--) {      //遍历DIV，从最后一个开始。

                 div[i].style.left = div[i - 1].offsetLeft + 'px';       //将前一个的offsetLeft给后一个

                 div[i].style.top = div[i - 1].offsetTop + 'px';     //将前一个的offsetTop给后一个

             }

             div[0].style.left = pos.x + 'px';       //将鼠标的横坐标给第一个

             div[0].style.top = pos.y + 'px';        //将鼠标的纵坐标给第一个

         }

         function GetMouse(ev) {     //获取鼠标移动的坐标

             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

             var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

             return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }

         }

     </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>

 </body>

点滴积累【JS】---JS小功能（onmousemove鼠标移动坐标接龙DIV)的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

    效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...

  3. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  4. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  5. 点滴积累【JS】---JS小功能（JS实现匀速运动）

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...

  6. 点滴积累【JS】---JS小功能（createElement和insertBefore添加div下面的节点）

    效果: 代码: <head runat="server"> <title></title> <script type="text ...

  7. 点滴积累【JS】---JS小功能（JS实现动态添加运动属性)

    效果: 思路: 首先遍历div挨个执行onmouseover事件,再设置获取非行间样式.然后编写setInterval计时器框架,框架内容是:将三个参数 div.div属性.div的目标点,分别获得, ...

  8. 点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)

    效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: <head ru ...

  9. 点滴积累【JS】---JS小功能（JS实现侧悬浮浮动)

    效果: 思路: 首先,加载onscroll控制滚动条.然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点.最后将其参数返回.再在onscrol ...

随机推荐

  1. 判断IE版本的HTML语句详解，如：<!--[if IE 9]> 仅IE9可识别 <![endif]-->

    我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: 注意:以下用法不支持IE ...

  2. Http和Https网络同步请求httpclient和异步请求async-http-client

    原文:https://blog.csdn.net/fengshizty/article/details/53100694 Http和https网络请求 主要总结一下使用到的网络请求框架,一种是同步网络 ...

  3. Java Excel 插入图片

    在POI中有HSSFPatriarch对象,该对象为画图的顶级管理器,它的createPicture(anchor, pictureIndex)方法就能够在Excel插入一张图片.所以要在Excel中 ...

  4. js中几种常见的方法的实例 shift,unshift,push,prop

    1.shift()定义和用法 shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值. 语法:arrayObject.shift() 返回值:数组原来的第一个元素的值. 说明:如果 ...

  5. hdu 1244 DP

    水DP dp[i%2][j]=Max(dp[i%2][j-1],dp[1-i%2][j-l[i]]+sum[j]-sum[j-l[i]]); #include "stdio.h" ...

  6. [转]SQL Server 2005 Integration Services (SSIS) (3) - Business Intelligence Development Studio

    本文转自:http://blog.csdn.net/me_online/article/details/1546281 三,SQL Server Integration Services 开发环境– ...

  7. Shell学习:if语句 if -z -n -f -eq -ne -lt

    if  条件then Commandelse Commandfi                              别忘了这个结尾 If语句忘了结尾fitest.sh: line 14: sy ...

  8. 流畅的python第十七章使用期物处理并发

    从 Python 3.4 起,标准库中有两个名为 Future 的类:concurrent.futures.Future 和asyncio.Future.这两个类的作用相同:两个 Future 类的实 ...

  9. LeetCode56:Jump Game

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  10. 教你用 google-drive-ocamlfuse 在 Linux 上挂载 Google Drive

    如果你在找一个方便的方式在 Linux 机器上挂载你的 Google Drive 文件夹, Jack Wallen 将教你怎么使用 google-drive-ocamlfuse 来挂载 Google ...