效果：

思路：

利用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. Linux虚拟化技术KVM、QEMU与libvirt的关系（转）

    说明:个人理解,KVM是内核虚拟化技术,而内核是不能使用在界面上使用的,那么此时QEMU提供了用户级别的使用界面,相互辅助.当然,单独使用QEMU也是可以实现一整套虚拟机,不过QEMU+KVM基本是标 ...

  2. 解决Hue/hiveserver2报错：java.io.IOException: Job status not available

    sql是:select count(distinct col) from db.table; 排查过程中遇到过几个不同的报错: 1. beeline -u jdbc:hive2://0.0.0.0:1 ...

  3. [Android Pro] StorageManager简介

    StorageManager StorageManager is the interface to the systems storage service. The storage manager h ...

  4. 用BETTERCAP和RASPBERRY PI ZERO W制作迷你WiFi干扰器

    我并不是一个特别勤快的人,几天前我终于开始将我几周以来的一些想法付诸于实践,即使用Raspberry Pi Zero W制作一个可随身携带的迷你WiFi干扰器.有了它,我就可以随时随地的收集附近无线接 ...

  5. 第九章：Elasticsearch集群优化及相关节点配置说明

    Linux系统调优: Linux调整打开文件数(重新启动生效) 在/etc/security/limits.conf在文件中增加: * soft nofile 8192 * hard nofile 2 ...

  6. 【Python】解决Django Admin管理界面样式表(CSS Style)丢失问题

    配置Django Admin,关于如何启用请参考Django官方文档<Activate the admin site>.但是我在配置过程中登录http://example.com/admi ...

  7. Eight_pku_1077(广搜).java

    Eight Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 21718   Accepted: 9611   Special ...

  8. [HTML5] Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

    We want to show an SVG avatar of the patio11bot, so we'll do that in three ways: Using an img tag - ...

  9. Android异步载入全解析之大图处理

    Android异步载入全解析之大图处理 异步载入中很重要的一部分就是对图像的处理,这也是我们前面用异步载入图像做示例的原因. 一方面是由于图像处理不好的话会很占内存,并且easyOOM,还有一方面,图 ...

  10. Gstreamer学习

    Gstreamer学习笔记----Gstreamer架构设计思想 http://blog.csdn.net/tx3344/article/details/7497434 Gstreamer到底是个啥? ...