javascript（移动的div）

一、效果图

javascript（移动的div）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				position: absolute;
				background-color: red;
			}
			
		</style>
		<script>
			window.onload = function(){
				var box1=document.getElementById("box1");
				document.onmousemove = function(event){
					
					//解决兼容性问题
				    event = event || window.event;
				    //获取鼠标的坐标
				    
				    //相当于当前页面的坐标/*ie8不兼容*/
				    /* var x = event.pageX;
				    var y = event.pageY;*/
				    //获取当前可见窗口的坐标
				    var x = event.clientX;
				    var y = event.clientY;
				    
				    //获取滚动的条的滚动的距离 
				    //设置div的偏移量   它是相当于整个页面的偏移的
				    /*var st = document.body.scrollTop; //chrome 兼容
				    var st = document.documentElement.scrollTop;//除了chrome都兼容*/
				    
				   
				   var st = document.body.scrollTop||	document.documentElement.scrollTop;
				   //水平的同理
				   var xt = document.body.scrollLeft||	document.documentElement.scrollLeft;		  
				    
				   box1.style.left =x+xt+"px";
				   box1.style.top=y+st+"px";
				  
				}
			}
			
		</script>
	</head>
	<body style="height: 1000px; width: 2000px;">
		<div id="box1">
		</div>
	</body>
</html>

在代码中我把 body设置了宽度和高度，是为了看出当页面有滚动条的时候，当你移动了滚动条再去移动div

div和鼠标会产生一定的距离。所以才有了这一步。如果觉得不需要删除即可。

 var st = document.body.scrollTop||	document.documentElement.scrollTop;
				   //水平的同理
  var xt = document.body.scrollLeft||	document.documentElement.scrollLeft;