<!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. php获取字符串长度函数strlen和mb_strlen

    php获取字符串长度函数strlen和mb_strlencount() - 计算数组中的单元数目,或对象中的属性个数strlen — 获取字符串长度,一个汉字为3个字符mb_strlen() - 获取 ...

  2. 51Nod 1072 威佐夫游戏

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1072 有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆 ...

  3. 听 Fabien Potencier 谈Symfony2 之 《What is Symfony2 ？》

    Symfoy2 是什么? PHP世界里又一广受关注的web MVC框架? Fabien Potencier 却不这么说! Fabien Potencier这样定义Symfoy2 是个什么东西: 首先, ...

  4. Linux 进程管理 ps、top、pstree命令

    ps命令:查看系统中正在运行的进程 ps 是用来静态地查看系统中正在运行的进程的命令.不过这个命令有些特殊,它的部分选项不能加入"-",比如命令"ps aux" ...

  5. linux /etc/shadow--passwd/pam.d/system-auth文件详解

     在linux操作系统中, /etc/passwd文件中的每个用户都有一个对应的记录行,记录着这个用户的一下基本属性.该文件对所有用户可读.   而/etc/shadow文件正如他的名字一样,他是pa ...

  6. 注意！list和array是不同的

     python中的list是python的内置数据类型,list中的数据类型不必相同的,而array的中的数据类型必须全部相同. numpy中封装的array有很强大的功能,里面存放的都是相同的数据类 ...

  7. eclipse 出现内存溢出问题解决办法

    1.eclipse.ini添加设置: -vm#eclipse启动使用的jdk设置,路径根据自己实际路径修改 C:/Program Files/Java/jdk1.6.0_45/bin/javaw.ex ...

  8. php 获取顶级域名

    /** * 获取顶级域名 * @param $url * @return string */ public static function getDoMain($url){ if(empty($url ...

  9. P2233 [HNOI2002]公交车路线

    洛咕原题 dp->矩阵乘法 首先我们可以得出一个状态转移方程 f[i][j]=f[i-1][j-1]+f[i-1][j+1] 蓝后发现,我们可以把这转化为一个8*8的转移矩阵 然后跑一遍矩阵快速 ...

  10. 05: 使用axios/vue-resource发送HTTP请求

    1.1 axios 简介与安装 1.axios简介 1. vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 2. axios是一个基于Promise的HTTP请 ...