javascript（移动的div）

快来打我* 2022-04-18 04:26 219阅读 0赞

一、效果图

![20181108145544160.gif][]

<!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;

[20181108145544160.gif]: /images/20220418/935317a6cfd4420c80aa19011047170a.png