码迷,mamicode.com
首页 > 其他好文 > 详细

老鹰捉小鸡 鼠标跟随div

时间:2015-09-05 23:44:40      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	    div{width:20px;height:20px;background: red; position:absolute;}
	</style>
	<body style="height:3000px">
	   
	   <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>
<script>

  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 oEvent = ev||event;
		var pos = getPos(event);
		var oDiv = document.getElementsByTagName("div");
         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>

  

老鹰捉小鸡 鼠标跟随div

标签:

原文地址:http://www.cnblogs.com/dcwq/p/4784117.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!