javascript元素跟随鼠标在指定区域运动

浏览数：43 / 时间：2015年06月08日

元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中，下面是完整的Demo：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标区域</title>
	<style type="text/css">
	*{margin:0;padding:0;}
		.area{
			width:400px;
			height:400px;
			margin:30px auto;
			background: #ccc;
			overflow: hidden;
			position: relative;
		}
		.hover{
			border:1px dashed #000;
			width:100px;
			height:100px;
			background: rgba(0,0,0,0.25);
			position: absolute;
			display: none;
			cursor: move;
		}
	</style>
</head>
<body>
	<div id="area" class="area">
		<div class="hover" id="hover">
	</div>
	<script type="text/javascript">
		var $box = document.getElementById("area");
		var $hover = document.getElementById("hover");
		var boxW=$box.offsetWidth,
			boxH=$box.offsetHeight,
			boxLeft=$box.offsetLeft,
			boxTop=$box.offsetTop;
		var startX,startY,hoverW,hoverH;
		$box.onmouseover=function(event){
			var event=event||window.event;
			$hover.style.display="block";
			hoverW=$hover.offsetWidth,
			hoverH=$hover.offsetHeight;
			var x = event.clientX;
			var y = event.clientY;
			$hover.style.left=(x-boxLeft-hoverW/2)+"px";
			$hover.style.top=(y-boxTop-hoverH/2)+"px";
			console.log(boxW+"<br/>"+hoverW)
		}
		
		$box.onmousemove=function(event){
			var event=event||window.event;
			var x = event.clientX;
			var y = event.clientY;
			var resultX,resultY;
			if(x-boxLeft-50<0){
				resultX=0;
			}else if(x-boxLeft-50>=boxW-hoverW){
				resultX=boxW-hoverW;
			}else{
				resultX=x-boxLeft-50;
			}
			if(y-boxTop-50<0){
				resultY=0
			}else if(y-boxTop-50>=boxH-hoverH){
				resultY=boxH-hoverH;
			}else{
				resultY=y-boxTop-50;
			}
			$hover.style.left=resultX+"px";
			$hover.style.top=resultY+"px";
		}
		$box.onmouseout = function(event) {
			var event=event||window.event;
			var x = event.clientX;
			var y = event.clientY;
			var divx1 = $box.offsetLeft;
			var divy1 = $box.offsetTop;
			var divx2 = $box.offsetLeft + $box.offsetWidth;
			var divy2 = $box.offsetTop + $box.offsetHeight;
			if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
				$hover.style.display="none";
			}
		}

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

　　主要是两个关键点：

1、获取鼠标当前位置，然后设置运动元素的当前位置为鼠标位置；

2、判断元素是否靠近父级元素的边界，设置临界值；

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

javascript元素跟随鼠标在指定区域运动