<!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基础命令---显示树形进程pstree

    pstree pstree显示正在运行的进程的树形结构,树以PID为根:如果省略了pid则以init为根.如果指定了用户名,则显示根植于该用户拥有的进程的所有进程树.如果pstree被调用为pstre ...

  2. crontab 在指定时间范围每隔2小时执行一次和指定时间执行实例

    crontab 在指定时间范围每隔2小时执行一次和指定时间执行,下面实例实现了:10-23点每两个小时执行一次,2点执行一次,分钟依次是1 2 3 ,没有24点的,晚上12点是0点注:*代表所有的取值 ...

  3. ul点击li,增加样式

    用户首次绑定后,需要选择一款头像 <!--imgList头像列表--><el-row class="regModel1"> <el-col :span ...

  4. Python+OpenCV图像处理（八）—— 图像直方图

    直方图简介:图像的直方图是用来表现图像中亮度分布的直方图,给出的是图像中某个亮度或者某个范围亮度下共有几个像素.还不明白?就是统计一幅图某个亮度像素数量.比如对于灰度值12,一幅图里面有2000 个像 ...

  5. springboot打war包需要注意事项

    1. pom文件 1.1 添加servlet-api依赖: <!-- 添加servlet-api的依赖--> <dependency> <groupId>org.a ...

  6. 图片转化成base64字符串

    package demo; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; public ...

  7. MySql与MariaDB由来与历程

    MySQL数据库 MySQL数据库是一个关系型数据库管理系统,由瑞典MySQL AB公司开发.MySQL是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这 ...

  8. MyEclipse项目的jquery.js发生[Multiple markers at this line - Missing semicolon]的解决方案

    问题描述: 导入jquery库后,发现提示错误信息:Multiple markers at this line - Missing semicolon,如下截图所示: 解决方案: 选中该jquery. ...

  9. 关于HashSet的equals和hashcode的重写

    关于HashSet的equals和hashcode的重写:package Test; import java.util.HashSet; import java.util.Set; public cl ...

  10. Docker学习笔记之通过 Dockerfile 创建镜像

    0x00 概述 由于 Docker 镜像的结构优势,使它的占用空间远小于普通的虚拟机镜像,而这就大幅减少了 Docker 镜像在网络或者其他介质中转移所花费的时间,进而提高了我们进行迁移部署的效率.不 ...