<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

</head>

<style>

      div{width: 10px;height: 20px;background-color: red;position: absolute;}      

</style>

<body>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>          

</body>

<script type="text/javascript">

         function getPos(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 }

         }

              document.onmousemove=function(ev){

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

                      var oEvent=ev || event;

                      var pos=getPos(oEvent);

                      for(var i=oDiv.length-1;i>0;i--){

                              oDiv[i].style.left=oDiv[i-1].offsetLeft+'px';

                              oDiv[i].style.top=oDiv[i-1].offsetTop+'px';

                      }

                      oDiv[0].style.left=pos.x+'px';

                      oDiv[0].style.top=pos.y+'px';

              }

</script>

</html>

js之鼠标随动后面跟随事件(类似于长龙跟着跑)的更多相关文章

  1. 用js捕捉鼠标连续点击三次事件怎么实现啊

    var count = 0, timer; document.onclick = function(){ if(count < 2){ if(timer){ clearTimeout(timer ...

  2. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  3. js进阶 12-3 如何实现元素跟随鼠标移动

    js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...

  4. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  5. 61.H5---利用canvas+原生js进行鼠标跟随绘图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  7. js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)

     js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...

  8. js中鼠标点击、移动和光标移动的事件触发

    事件有三要素:事件源.事件数据.事件处理程序 事件冒泡:当元素嵌套的时候,内部元素激发某个事件后,默认情况下外部元素相应的事件也会跟着依次触发 可以加return false;是阻止默认操作 oncl ...

  9. js设置鼠标悬停改变背景色

    看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...

随机推荐

  1. Linux基础命令---ifdown、ifup

    ifup ifup指令用来启动网络接口设备,设备必须是定义在“/etc/sysconfig/network-scripts/ifcfg-ethX”或者“/etc/sysconfig/network”的 ...

  2. [转载]WebService使用的一些总结

    什么是WebService: 这个不用我在这里废话,网上的资料一搜一大把,如果你没有接触过这方面的知识,你可以先去网上查一下.这里我只想说一下我印象比较深刻的几点: WebService是基于soap ...

  3. [转载]Oracle中的NVL函数

    Oracle中函数以前介绍的字符串处理,日期函数,数学函数,以及转换函数等等,还有一类函数是通用函数.主要有:NVL,NVL2,NULLIF,COALESCE,这几个函数用在各个类型上都可以. 下面简 ...

  4. router.go,router.push,router.replace的区别

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现.当你点击 <router-link> 时,这个 ...

  5. The Little Prince-12/04

    The Little Prince-12/04 The wheat fields have nothing to say to me. And that is sad. But you have ha ...

  6. 一名3年工作经验的java程序员应该具备的职业技能

    一名3年工作经验的Java程序员应该具备的技能,这可能是Java程序员们比较关心的内容.我这里要说明一下,以下列举的内容不是都要会的东西—-但是如果你掌握得越多,最终能得到的评价.拿到的薪水势必也越高 ...

  7. Source Insight 如何将script等文件加入

    点击菜单栏Options -> Document Options , 然后再弹出的对话框中找到File filter,文件过滤的设置,里面肯能有*.c;*.h 你在后面添加Makefile,注意 ...

  8. 【js】手机浏览器端唤起app，没有app就去下载app 的方法

    这种功能的作用: 1.一般公司有自己的app,而app是需要不断有新用户涌入才能持续运营,达到不错的收入.就需要使用这种方式进行引入新的用户. 2.一些内容在网页端体验不好,或者一些功能需要app内才 ...

  9. Error: could not open `C:\Java\jre7\lib\amd64\jvm.cfg'

    在运行cmd黑窗口时候出现:Error: could not open `C:\Java\jre7\lib\amd64\jvm.cfg'这样的错误的时候,本人没有删除任何文件,只是重新配置了一下jdk ...

  10. Linux - TCP编程相关配置1

    100万并发连接服务器笔记之1M并发连接目标达成 第四个遇到的问题:tcp_mem 在服务端,连接达到一定数量,诸如50W时,有些隐藏很深的问题,就不断的抛出来. 通过查看dmesg命令查看,发现大量 ...