效果：

思路：

利用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. 拍拍CPS入门使用

    1.新建应用,获取应用相应的appOAuthID.appOAuthKey.accessToken(这个一点击获取就会改变的,而且最长有效期为3个月,失效了需要重新获取) http://fuwu.pai ...

  2. JavaMail入门：创建纯文本、HTML格式的邮件

    转自:http://haolloyin.blog.51cto.com/1177454/353849/ 在 http://java.sun.com/products/javamail/ 下载了 Java ...

  3. SQLAlchemy中filter()和filter_by()的区别

    1.filter引用列名时,使用“类名.属性名”的方式,比较使用两个等号“==” 2.filter_by引用列名时,使用“属性名”,比较使用一个等号“=” 3.在使用多条件匹配的时候,filter需要 ...

  4. 关于TagHelper的那些事情——Microsoft.AspNet.Mvc.TagHelpers介绍

    写在开始 在上一篇文章中,简单介绍了什么是TagHelper,怎么使用它.接下来我会简单介绍一下微软随着ASP.NET5一起发布的TagHelpers.它们分别是: AnchorTagHelper C ...

  5. [转]SSIS: Execute Package via Stored Procedure

    本文转自:http://sqlblog.de/blog/2009/09/ssis-execute-package-via-stored-procedure/ There are two options ...

  6. phpcms的后台网站直接访问正常，百度快照收录链接访问跳转到非法网站

    问题:    phpcms制作的网站直接访问正常,百度快照收录链接访问跳转到非法网站 百度快照收录网站域名,访问时自动跳转到一个非法网站 检查静态页index.html,index.php 网页内引用 ...

  7. 转：关于腾讯bugly崩溃的android so符号表使用

    http://www.jikexueyuan.com/course/406_8.html

  8. javascript设置首页,加入收藏

    <a href="javascript:;" id="setHomePage" class="toolsbar" onclick=&q ...

  9. Linux 变量引用和命令替换

    1.变量引用 name=Andy echo $name 或 echo ${name} 2.命令替换 把命令的执行结果赋值给变量,使用倒引号或者$() APP_HOME=`pwd` 或 APP_HOME ...

  10. SOA初探

    背景 曾今SOA的概念犹如今日“云计算.大数据”一样,被炒得火热,不少企业便纷纷响应,并宣称会拥抱和实施SOA.而事实上,业界出现了两种极端:一种是由于各类文章和书籍关于SOA的描述往往太过抽象,再加 ...