JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div
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的更多相关文章
- JS仿贪吃蛇:一串跟着鼠标的Div
贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...
- 一串跟随鼠标的DIV
div跟随鼠标移动的函数: <!DOCTYPE HTML><html><head> <meta charset="utf-8"> & ...
- (转)js学习笔记()函数
1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的个数则缺失的参数数会被自动赋予undefined值. 2.如果是用function语句声明的函数定义则不可以出现在循环 ...
- js学习笔记34----自执行函数
自执行函数的写法通常如下: 方式1: (function(){ *** 写事件处理代码 *** }()) 方式2: (function(){ *** 写事件处理代码 *** })() 方式3: !(f ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- jQuery源代码学习笔记_工具函数_noop/error/now/trim
jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
随机推荐
- 洛谷 P1705 爱与愁过火
P1705 爱与愁过火 题目背景 (本道题目隐藏了两首歌名,找找看哪~~~) <爱与愁的故事第一弹·heartache>第三章. 爱与愁大神说这是ta的伤心指数,只不过现在好很多了,翻译只 ...
- struts.xml配置action没用,任意href自动跳到主页,在action中print没用?????
今晚弄了好久都搞不清楚,晕死我了. 上网找也没找到解决办法. 然后看了Build Path.好吧,有几个没用的jar包,remove之.我去,马上正常了,具体原因未知. 总结:删除jar包不代表Bui ...
- [Servlet]研究ServletContext对象
作者信息 作者姓名:金云龙 个人站点:http://www.longestory.com 个人公众帐号:搜索"longestory"或"龙哥有话说" Servl ...
- .Net中常用的几种ActionResult
1.ViewResult 表示一个视图结果,它根据视图模板产生应答内容.对应得Controller方法为View. 2.PartialViewResult 表示一个部分视图结果,与ViewResult ...
- 42.cnpm不是内部命令的解决方案:配置环境变量
转自:https://blog.csdn.net/u014540814/article/details/78777961
- 2011年度十大杰出IT博客获奖感言
2011年度十大杰出IT博客获奖感言 在各位评委.网友的支持下,我的博客从前50名中脱颖而出跻身10强,得到这个消息之后心中充满了喜悦.在这里要感谢51CTO为大家提供这样一个良好的展示平台. ...
- 完整性检查工具Nabou
完整性检查工具Nabou 650) this.width=650;" onclick="window.open("http://blog.51cto.com/viewpi ...
- 分享一个jquery实现的双向选择组件
<html><head> <meta charset="utf-8"> <title>数据删选组件</title> &l ...
- ELK+KAFKA安装部署指南
一.ELK 背景 通常,日志被分散的储存不同的设备上.如果你管理数十上百台服务器,你还在使用依次登录每台机器的传统方法查阅日志.这样是不是感觉很繁琐和效率低下.当务之急我们使用集中化的日志管理,例如: ...
- 调用中行接口针对返回报文(xml形式)做相关处理
最近在对接中行银行接口,在获取返回报文的时候遇到一些问题,现在在这里做个总结 TIP: 在返回报文之前,要对前置机的URL请求,在这期间遇到一个坑,还是通过查看日志才发现问题 在填写转账信息的时候要求 ...