<!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. AI赌神称霸德扑的秘密，刚刚被《科学》“曝光”了

    AI赌神称霸德扑的秘密,刚刚被<科学>“曝光”了 称霸德州扑克赛场的赌神Libratus,是今年最瞩目的AI明星之一. 刚刚,<科学>最新发布的预印版论文,详细解读了AI赌神背 ...

  2. GUI界面修饰

    function varargout = GUI20(varargin) % GUI20 MATLAB code for GUI20.fig % GUI20, by itself, creates a ...

  3. SQL非域环境下带自动故障转移数据库镜像的实现方法（包括镜像服务器）

    使用数据库镜像来提高数据库的高可用性,在镜像服务器创建镜像数据库的快照以卸载报表查询对生产数据库的负载.TechNet有讲座对此技术进行介绍,但看到大家在讲座的讨论区中遇到了很多问题,下面我把在非域环 ...

  4. Django框架----路由系统（详细）

    Django的路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. ...

  5. MVC模式、加密、jsonwebtoken

    一.MVC模式(架构思想) M:model层,主要是数据的增删改查 V:view层,主要是视图的展示 C:controller层,主要负责业务逻辑 二.加密(md5加密.sha256加密)1.sha2 ...

  6. linux下can调试工具canutils安装过程记录

    https://www.cnblogs.com/chenfulin5/p/6797756.html 一.下载源码 下载canutils和libsocketcan libsocketcan地址:http ...

  7. Linux 下wifi 驱动开发（四）—— USB接口WiFi驱动浅析

    源: Linux 下wifi 驱动开发(四)—— USB接口WiFi驱动浅析

  8. 搭建ssm框架

    我现在在着手搭建一个项目ssm+angularsJs的框架 以下是目录结构 将所有的依赖全部引入到父工程中,然后在子工程中需要的时候,再引入,父工程只是用来引入依赖 <!-- 集中定义依赖版本号 ...

  9. mycat实现mysql数据库的垂直切分

    在我们的工作中可能会遇到数据库的io瓶颈. 这个时候我们应该怎么办呢? 解决办法有很多,我们可以想到的为:数据库集群,主从复制,读写分离,数据库负载均衡,数据库的分库,分表.接下来我们写一下,数据库的 ...

  10. Linux网络管理（一）：网卡驱动与Linux内核

    下图简单描述了网卡驱动与Linux内核之间的联系: 关于上图的一些说明: 系统初始化: 1. 协议模块调用 dev_add_pack() 来注册协议处理函数到链表 &ptype_base: 2 ...