效果：

思路：

利用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. 【java】LIst切割----划分 List为几个LIst的几种工具类 1.按照目标份数划分 2.按照目标容量划分 【适用场景：mybatis分批次In查询，放置In拼接sql过长】

    如题,示例代码如下: /** * 1> 按照份数---划分list * @param source * @param num 想要划分成多少份 * @return */ public stati ...

  2. Windows7下安装与破解IntelliJ IDEA2017(转载)

    IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具( ...

  3. easyui combobox可编辑的情况下，只能首字母开始过滤的问题选项

    esayui中的combobox下拉列表在可编辑的情况下可以输入内容来过滤下拉框的选项,而1.4.2版本只能在从首字母开始过滤例如其中一个选项是"test", 只能输入" ...

  4. nginx安装和配置

    一.安装:yum install nginx service nginx restart/start/check/status/... 二.配置:官网文档 http://nginx.org/en/do ...

  5. OO软件设计说明书结构

    1 概述   系统简述.软件设计目标.参考资料.修订版本记录   这部分论述整个系统的设计目标,明确地说明哪些功能是系统决定实现而哪些时不准备实现的.同时,对于非功能性的需求例如性能.可用性等,亦需提 ...

  6. 转: codereview工具之 review board 选型与实践

    转:ReviewBoard代码评审实践总结 http://my.oschina.net/donhui/blog/350074 svn与review board 结合实践 http://my.oschi ...

  7. atitit.提升开发效率---使用server控件生命周期 asp.net 11个阶段 java jsf 的6个阶段比較

    atitit.提升开发效率---使用server控件生命周期  asp.net 11个阶段  java jsf 的6个阶段比較 例如以下列举了server控件生命周期所要经历的11个阶段. (1)初始 ...

  8. CCPlatformConfig（设置执行平台 iOS android win32等。。。）

    #ifndef __CC_PLATFORM_CONFIG_H__ #define __CC_PLATFORM_CONFIG_H__ /** Config of cocos2d-x project, p ...

  9. python中，== 与 is 之间区别

    在python中,== 与 is 之间既有区别,又有联系,本文将通过实际代码的演示,力争能够帮助读到这篇文章的朋友以最短的时间理清二者的关系,并深刻理解它们在内存中的实现机制. 扯淡的话不多说,下面马 ...

  10. Python将一个大文件按段落分隔为多个小文件的简单方法

    今天帮同学处理一点语料. 语料文件有点大,而且是以连续两个换行符作为段落标志,他想把它按段落分隔成多个小文件.即每3个段落组成一个新文件.因为曾经没有遇到过类似的操作,在网上找了一些类似的方法,看起来 ...