<!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. web安全防范之SQL注入攻击、攻击原理和防范措施

    SQL注入 攻击原理 在编写SQL语句时,如果直接将用户传入的数据作为参数使用字符串拼接的方式插入到SQL查询中,那么攻击者可以通过注入其他语句来执行攻击操作,这些攻击包括可以通过SQL语句做的任何事 ...

  2. (Review cs231n) Gradient Calculation and Backward

    ---恢复内容开始--- 昨日之补充web. 求解下图的梯度的流动,反向更新参数的过程,表示为 输入与损失梯度的关系,借助链式法则,当前输入与损失之间的梯度关系为局部梯度乘以后一层的梯度. ---恢复 ...

  3. I2S接口介绍

    I2S接口介绍一.I2S协议介绍 I2S协议作为音频数据传输协议,由Philips制定.该协议由三条数据线组成:1.SCLK:串行时钟,频率= 2 * 采样频率 * 采样位数.2.WS:字段(声道)选 ...

  4. Codeforces 237A - Free Cash

    题目链接:http://codeforces.com/problemset/problem/237/A Valera runs a 24/7 fast food cafe. He magically ...

  5. 51nod 1057 N的阶乘 (大数运算)

    输入N求N的阶乘的准确值.   Input 输入N(1 <= N <= 10000) Output 输出N的阶乘 Input示例 5 Output示例 120 压位: 每个数组元素存多位数 ...

  6. JustOj 1415: 字符串解压

    题目描述 豆豆非常调皮,总喜欢把一样的东西摆在一起,然后用神奇的猫爪功把他们揉成一团. 比如一堆A,就会被揉成个数+A. 这就是豆豆的字符串压缩算法了. 比如给豆豆一个字符串:ABBCCCDDDDEE ...

  7. Let's Encrypt申请证书及使用

    Let's Encrypt是一个免费的.自动的,开放的CA. 形形色色有证书扩展名和类型,我是通过这篇文章明白个大体的:http://www.cnblogs.com/guogangj/p/411860 ...

  8. 纯CSS打造萌萌哒大白

    HTML部分: <body> <div id="baymax"> <!-- 定义头部,包括两个眼睛.嘴 --> <div id=" ...

  9. P3924 康娜的线段树（期望）

    P3924 康娜的线段树 看起来$O(nlogn)$可过其实由于巨大常数是无法通过的 $O(nlogn)$:70pts 我们手玩样例发现 线段树上某个节点的期望值$f[o]=(f[lc]+f[rc]) ...

  10. php 常用代码片断

    参考: https://www.jianshu.com/p/f5303225ef92 http://www.phpxs.com/code/php/