event 事件 clientX 和clientY 配合scrollTop使用, div跟着鼠标走 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				background: red;
				position: absolute;
				left: 0;
			}
		</style>
		<script>
			window.onload = function(){
				//这样会出现一个问题 当body高度大于可是区出现滚动条的时候 鼠标oEvent.clientY是可视区的高度 而块是按body定位的
				//出现滚动条后  div和鼠标位置就有了问题  怎么解决呢？clientY加上scrollTop就可以解决
				document.onmousemove = function(ev){
					
					var oEvent = ev|| event;
					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					var oDiv = document.getElementById("div1");
					
					oDiv.style.left = oEvent.clientX + "px";
					oDiv.style.top = oEvent.clientY +scrollTop+ "px";
				}
			}
		</script>
	</head>
	<body style="height: 2000px;">
		<div id="div1"></div>
	</body>
</html>

　　

函数的封装和如何使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				background: red;
				position: absolute;
				left: 0;
			}
		</style>
		<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};
			}
			window.onload = function(){

				document.onmousemove = function(ev){
					
					var oEvent = ev|| event;
					var oDiv = document.getElementById("div1");
					
					//函数的使用
					var pos = getPos(oEvent);

					oDiv.style.left = pos.x + "px";
					oDiv.style.top = pos.y + "px";
				}
			}
		</script>
	</head>
	<body style="height: 2000px;">
		<div id="div1"></div>
	</body>
</html>

　　

posted @ 2016-03-12 13:40  mingjixiaohui  阅读(528)  评论(1)    收藏  举报