随鼠标移动 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	*{margin: 0;padding: 0;}
	div{width:100px;height:100px;background:green;position:absolute;top:10px;left:10px;}	
</style>
</head>
<body>
	<div id="div"></div>	
	<script>
		var div = document.getElementById("div"); 	
		var dx = 0;
		var dy = 0;

		div.onmousedown = function(e){
			var evt = e || window.event;
			// 鼠标点击 div 的位置
			dx =  evt.clientX - div.offsetLeft;
			dy =  evt.clientY - div.offsetTop;

			document.onmousemove = function(ev){
				var evt = ev || window.event;
				var nx = evt.clientX;
				var ny = evt.clientY;
				// 移动 div 重新设置 新的位置
				div.style.left = nx - dx + 'px';
				div.style.top = ny - dy + 'px';
			}
		}

		div.onmouseup = function(){

			// 取消移动的事件
			document.onmousemove = null;
		}




	</script>
</body>
</html>

　　

posted @ 2016-09-02 09:32  多幸运1号  阅读(194)  评论(0)    收藏  举报