function getPosition(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}
//返回一个json,类似数组的东西。 json还不是很熟悉。
} document.onmousemove = function (ev) {
var oEvent = ev||event;
var oDiv = document.getElementById('div1'); var pos = getPosition(oEvent);
oDiv.style.left = pos.x + 'px';
//pos.x 相当于在前面的json(类似数组)里,调取了 x 这一项的值。
      oDiv.style.top = pos.y + 'px'; };
};
    function getPosition(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 oEvent = ev||event;
var aDiv = document.getElementsByTagName('div');
var pos = getPosition(oEvent); for (var i=aDiv.length-1; i>0; i--) //倒着循环
{
aDiv[i].style.left = aDiv[i-1].offsetLeft+'px';
// 第[i]个div的left值不断被赋值为它前一个div(即aDiv[i-1])的left值,所以这个div会跟着前一个div移动。
aDiv[i].style.top = aDiv[i-1].offsetTop+'px';
} aDiv[0].style.left = pos.x + 'px';
aDiv[0].style.top = pos.y + 'px';
};

JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div的更多相关文章

  1. JS仿贪吃蛇:一串跟着鼠标的Div

    贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...

  2. 一串跟随鼠标的DIV

    div跟随鼠标移动的函数: <!DOCTYPE HTML><html><head> <meta charset="utf-8"> & ...

  3. (转)js学习笔记()函数

    1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的个数则缺失的参数数会被自动赋予undefined值. 2.如果是用function语句声明的函数定义则不可以出现在循环 ...

  4. js学习笔记34----自执行函数

    自执行函数的写法通常如下: 方式1: (function(){ *** 写事件处理代码 *** }()) 方式2: (function(){ *** 写事件处理代码 *** })() 方式3: !(f ...

  5. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. jQuery源代码学习笔记_工具函数_noop/error/now/trim

    jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...

  8. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

随机推荐

  1. Python socket doesn't close connection properly

    Python socket doesn't close connection properly The error information: [Errno 98] Address already in ...

  2. JavaScript提高:006:ASP.NET使用easyUI TABS标签updatepanel

    前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...

  3. Xposed框架之函数Hook学习

    作者:Fly2015 Xposed是Android下Java层的开源Hook框架类似的有cydiasubstrate框架而且据说cydiasubstrate框架能实现Android的Java层和Nat ...

  4. vue -- 跨域cookie 丢失的问题

    前端使用了vue-reource的$http进行请求后台接口 登陆完成后,服务端监控发现无法拿到cookie,下面看几张前端控制台监控的图 reqqust Header  没有显示cookie 信息 ...

  5. 关于li的排列,我的面试题

    来到北京的第二周,收到了单位的面试,一面的时候面试官问了微信钱包里的那个快速入口的排列,我当时在面试官的引导下答的还可以,但是在实际中有很多的方法和各自不同的问题,我来总结下. 1.flex布局,其实 ...

  6. POJ 2378 树形DP??

    思路: 找到每个节点的儿子size的最大值 和n-当前节点size 取个Max //By SiriusRen #include <cstdio> #include <cstring& ...

  7. 洛谷P2115 [USACO14MAR]破坏Sabotage

    题目描述 Farmer John's arch-nemesis, Farmer Paul, has decided to sabotage Farmer John's milking equipmen ...

  8. Android java.lang.NoSuchFieldError: No static field xxx of type I in class Lcom/XX/R$id; or its superclasses

    项目开发快到尾声,突然发现之前一个模块莫名其妙的奔溃了,我的内心也是奔溃的.以前一直都是好好的,也没去动过它,为啥会出现这样的问题呢? 下面我会根据自己的理解来看待问题 android是怎么根据id查 ...

  9. shell项目-分发系统-expect讲解

    shell项目-分发系统-expect讲解 yum install -y expect 1. 自动远程登录 #! /usr/bin/expect set host "192.168.133. ...

  10. fc---输出历史命令列表

    fc指令 fc指令可以用于输出历史命令列表,也可以通过调用vi编辑器对历史指令内容进行编辑输出. 语法: fc [-e ename] [-lnr] [first] [last] 选项: -l:显示历史 ...