您的位置：首页 > 其它

event 事件 div鼠标跟随

2016-03-12 14:33 435 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 10px;
height: 10px;
background: red;
position: absolute;
}
</style>
<script>
function getPos(ev){
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

return {x:ev.clientX +scrollLeft , y:ev.clientY + scrollTop};
}

window.onload = function(){
//第一种方法：
//			document.onmousemove = function(ev){
//				var oEvent = ev || event;
//				var aDiv = document.getElementsByTagName("div");
//
//				for(var i= aDiv.length-1;i>0;i--)
//				{
//					//后一个div跟着前一个div
//					aDiv[i].style.left = aDiv[i-1].offsetLeft +"px";
//					aDiv[i].style.top = aDiv[i-1].offsetTop +"px";
//				}
//				var pos = getPos(oEvent);
////				alert(pos.x);
//				//第一个是跟着鼠标走
//				aDiv[0].style.left = pos.x +"px";
//				aDiv[0].style.top = pos.y +"px";
//			}

//第二种方法
document.onmousemove = function(ev){
clearInterval(time)
var aDiv = document.getElementsByTagName("div");
var oEvent = ev || event;
var pos = getPos(oEvent);
var time ;
var i = 0;
function move(){
//定时器调用一次就给后一个div定位
aDiv[i].style.left =pos.x  +"px";
aDiv[i].style.top = pos.y +"px";
i++;
if(i>aDiv.length)
{
clearInterval(time);
}
}
time = setInterval(move,10);
}

}
</script>
</head>
<body style="height: 2000px;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航