效果：

思路：

利用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. NHibernate 之持久化类、拦截器 (第二篇)

    一.持久化类中成员标量的要求 作为被NHibernate使用的持久化类,必须满足以下几点要求: 1.声明读写属性 在NHibernate的使用中,持久化类的成员变量必须声明对应的属性,NHiberna ...

  2. 深入解析SQL Server并行执行原理及实践

    http://dbaplus.cn/news-21-431-1.html

  3. 一个简单的MVC模式练习

    控制层Action接受从模型层DAO传来的数据,显现在视图层上. package Action; import java.sql.Connection; import java.sql.SQLExce ...

  4. selector简介

    最近在学习java NIO,发现java nio selector 相对 channel ,buffer 这两个概念是比较难理解的 ,把学习理解的东西以文字的东西记录下来,就像从内存落地到硬盘,把内存 ...

  5. 将图片转换为Base64字符串公共类抽取

    public class ImageToBase64 { //图片转化成base64字符串 public static String GetImageStr(String path,int width ...

  6. linux gcc升级备忘录

    1. 拉包 sudo wget http://mirrors.opencas.org/gnu/gcc/gcc-6.3.0/gcc-6.3.0.tar.bz2 #如果以上给出的镜像不可用,也可以是使用h ...

  7. hadoop-2.0.0-cdh4.6.0 安装

    1.创建hadoop用户[所有操作都是root,在所有master和slaver上]1).创建hadoop用户:adduser hadoop2).更换密码:passwd hadoop========= ...

  8. javascript常用排序算法实现

    毕业后,由于工作中很少需要自已去写一些排序,所以那些排序算法都忘得差不多了,不过排序是最基础的算法,还是不能落下啦,于是找了一些资料,然后用Javascript实现了一些常用的算法,具体代码如下: & ...

  9. zigbee 学习笔记

    在德州仪器的站点:http://www.ti.com.cn/tool/cn/z-stack上下载安装zigbee2007协议栈版,我的是ZStack-CC2530-2.3.0-1.4.0. 以下演示一 ...

  10. 在Spring3中使用注解(@Scheduled)创建计划任务

    Spring3中加强了注解的使用,其中计划任务也得到了增强,现在创建一个计划任务只需要两步就完成了: 创建一个Java类,添加一个无参无返回值的方法,在方法上用@Scheduled注解修饰一下: 在S ...