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

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

元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的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、判断元素是否靠近父级元素的边界,设置临界值;

 

上一篇:图形编程入门之如何创建用于绘制的 Graphics 对象


下一篇:《版式设计——日本平面设计师参考手册》—第1章颜色设置