js实现简单的放大镜效果

在浏览电商网站时，我们经常会看到那种鼠标悬浮时，侧边出现放大的细节图的效果。下边是一个简单的图片放大镜效果实现过程。

css部分

*{
	margin:0;
	padding:0;
}
#box{
	position:relative;
	margin:200px;
	width:350px;
	height:350px;
	border:1px solid #666;
}
#small{
	position:relative;
}
#mask{
	position:absolute;
	width:175px;
	height:175px;
	background:blue;
	opacity:0.3;
	top:0;
	left:0;
	display:none;
	cursor:move;
}
#big{
	position:absolute;
	top:0;
	left:360px;
	width:400px;
	height:400px;
	border:1px solid #666;
	overflow:hidden;
	display:none;
}
#bigImg{
	position:absolute;
	left:0;
	top:0;
}

html部分

<div id="box">
	<!-- 小图 -->
	<div id="small">
		<img src="small.jpg" alt="">
		<!-- 遮罩 -->
		<div id="mask"></div>
	</div>
	<!-- 大图 -->
	<div id="big">
		<img id="bigImg" src="big.jpg" alt="">
	</div>
</div>

js部分

<script>
	//封装一个函数，便于通过id获取元素
	function $(id) {
		return document.getElementById(id);
	}

	var box = $("box");
	var small = $("small");
	var mask = $("mask");
	var big = $("big");
	var bigImg = $("bigImg");

	// 鼠标移入小图部分，遮罩和大图显示
	small.onmouseover = function(){
		mask.style.display = "block";
		big.style.display = "block";
	}
	
	// 鼠标移出小图部分，遮罩和大图隐藏
	small.onmouseout = function(){
		mask.style.display = "none";
		big.style.display = "none";
	}
	
	// 鼠标在小图部分移动，遮罩也移动
	small.onmousemove = function(e){
		var e = e || window.event;
		
		// 得到遮罩的left和top值
		var x = e.pageX - box.offsetLeft - mask.offsetWidth/2;
		var y = e.pageY - box.offsetTop - mask.offsetHeight/2;
		
		// 得到遮罩的left和top的最大值
		var maxX = box.clientWidth - mask.clientWidth;
		var maxY = box.clientHeight - mask.clientHeight;
		x = x < 0 ? 0 : (x > maxX ? maxX : x);
		y = y < 0 ? 0 : (y > maxY ? maxY : y);
		
		// 将x,y的值赋值给遮罩的left和top
		mask.style.left = x + "px";
		mask.style.top = y + "px";

		// 小图宽度：大图宽度 = x:大图的位置
		// small.offsetWidth : bigImg.offsetWith = x : 大图left
		var bigImgLeft = -x*bigImg.offsetWidth/small.offsetWidth;
		var bigImgTop = -y*bigImg.offsetHeight/small.offsetHeight;
		
		// 设置大图的left和top
		bigImg.style.left = bigImgLeft + "px";
		bigImg.style.top = bigImgTop + "px";
	}
</script>