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. cogs 1456. [UVa 10881,Piotr's Ants]蚂蚁

    1456. [UVa 10881,Piotr's Ants]蚂蚁 ★   输入文件:Ants.in   输出文件:Ants.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述 ...

  2. HDU 5281 Senior&#39;s Gun 杀怪

    题意:给出n把枪和m个怪.每把枪有一个攻击力,每一个怪有一个防御力.假设某把枪的攻击力不小于某个怪的防御力则能将怪秒杀,否则无法杀死.一把枪最多仅仅能杀一个怪,不能用多把枪杀同一个怪.每杀一次怪能够得 ...

  3. [Python] Check for None (Null) in Python

    If you’ve used other programming languages, you may have learned that an empty object is not the sam ...

  4. 4.2.2 MINUS

    4.2.2 MINUS正在更新内容,请稍后

  5. jquery19 ajax()

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. jquery源码09 (6058 , 6620) css() : 样式的操作

    var curCSS, iframe, // swappable if display is none or starts with table except "table", & ...

  7. 7.Web Service 调用天气代码

    1. 2500多个城市天气预报 WEB服务公用事业 Endpoint:http://webservice.webxml.com.cn/WebServices/WeatherWS.asmx Disco: ...

  8. 4. Brackets 前端编辑器试用

    转自:https://blog.csdn.net/wuji3390/article/details/71170579 Brackets编辑器介绍 "一个现代的,开源的,了解网页设计的编辑器& ...

  9. 完整性检查工具Nabou

    完整性检查工具Nabou 650) this.width=650;" onclick="window.open("http://blog.51cto.com/viewpi ...

  10. node搭建服务器

    创建简单的服务器,可以简单连接 var http = require("http"); var server = http.createServer(); server.on(&q ...