html js div随鼠标移动

611 0 0

作者:阿里奇奇

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>onmousemove</title>
		<style type="text/css">
			#box1{
				width:100px;
				height:100px;
				background-color:red;
				
				/*开启box1的绝对定位*/
				position:absolute;
			}
		
		</style>
		
		<script type="text/javascript">
			/*
			 *使div可以跟随鼠标移动
			 * */
			window.onload = function(){
			
			//获取box1
				var box1 = document.getElementById("box1");
				//绑定鼠标移动事件
				document.onmousemove = function(event){
					//解决兼容问题
					event = event || window.event;
					
					//获取滚动滚动的距离。
					//chrome认为滚动条是body。
					//火狐等认为是浏览器的滚动条是html的。
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					
					console.log(st);
					
					
					
					//获取到鼠标的坐标
					//用于获取鼠标在当前的可见窗口的坐标
					//在IE8中不支持 兼容IE8 则不要使用
					var left = event.clientX;
					var top = event.clientY;
					
					//设置div的偏移量
					box1.style.left = left+ sl + "px";
					box1.style.top = top+ st +"px";
				}
			}
			
		</script>
		
		
	</head>
	<body style="height:5000px;">
		
		<div id="box1">
			
			
			
		</div>
		
		
	</body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>onmousemove</title>
       <style type="text/css">
           #box1{
               width:100px;
               height:100px;
               background-color:red;

               /*开启box1的绝对定位*/
               position:absolute;
           }

       </style>

       <script type="text/javascript">
           /*
           *使div可以跟随鼠标移动
           * */
           window.onload = function(){

           //获取box1
               var box1 = document.getElementById("box1");
               //绑定鼠标移动事件
               document.onmousemove = function(event){
                   //解决兼容问题
                   event = event || window.event;

                   //获取滚动滚动的距离。
                   //chrome认为滚动条是body。
                   //火狐等认为是浏览器的滚动条是html的。
                   var st = document.body.scrollTop || document.documentElement.scrollTop;

                   var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

                   console.log(st);



                   //获取到鼠标的坐标
                   //用于获取鼠标在当前的可见窗口的坐标
                   //在IE8中不支持兼容IE8 则不要使用
                   var left = event.clientX;
                   var top = event.clientY;

                   //设置div的偏移量
                   box1.style.left = left+ sl + "px";
                   box1.style.top = top+ st +"px";
               }
           }

       </script>


   </head>
   <body style="height:5000px;">

       <div id="box1">



       </div>


   </body>
</html>

内容来源于网络如有侵权请私信删除

标签： javascript 技术文章开发

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

html js div随鼠标移动