JavaScript||放大镜效果

前几天逛淘宝网页版，在详情页，鼠标经过商品图片时，会在右侧出现对应的局部放大图，感觉好好玩（主要是想试试会不会做~），就自己尝试实现了，嘿嘿，一起来康康叭！

1,HTML页面布局

其实这个效果，揉碎了就是一个大盒子里面放左右两个小盒子：左边小盒子里面放小图片和半透明遮挡图；右边小盒子放大图片。
下面放代码和布局完毕后的图片~

//注：以下内容写在body里面噢
<div id="box">
	<div id="yt">
		<div id="yel"></div>
		<img src="img/14-photo.png" />
	</div>
	<div id="bt">
		<img src="img/14-photo.png" />
	</div>
</div>

2，css样式美化

你可能会说，哦买噶~纯布局的图片是在逗我吗？哈哈，纯HTML代码是不能满足我们的要求的，这就是为什么要进行样式设计的原因啦，下面先放添加css样式后的效果图片吧：

布局没啥好说的，看大家的审美吧哈哈哈，还是挑几个记录一下吧：
1）以为后面要实时获取鼠标在图片中的实时位置，所以必须要对元素定位，这里我都选择了绝对定位（position: absolute;）。
2）设置透明度的属性是opacity，值的范围是0-1，值越小，透明度越高，0就相当于消失了（opacity: 0.25;）。
3）观察，发现半透明框是存在于原图上面的，可以用属性z-index来实现设置元素的叠加顺序（z-index: 999;）。
4）一开始应该让半透明层和大图片盒子隐藏，方便后面操作（display: none;）

<style type="text/css">
	#box{
		position: absolute;
		top: 100px;
		left: 100px;
	}
	#yt{
		width: 200px;
		height: 200px;
		border: 1px solid black;
		cursor: move;
	}
	#yt img{
		position: absolute;
		top: 40px;
		left: 40px;
		width: 120px;
		height: 120px;
	}
	#yel{
		z-index: 999;
		position: absolute;
		width: 88px;
		height: 88px;
		background-color: orange;
		opacity: 0.25;
		display: none;
	}
	#bt{
		display: none;
		position: absolute;
		top: 0;
		left: 220px;
		width: 300px;
		height: 300px;
		/*border: 1px solid black;*/
		box-shadow: 2px 2px 2px #808080;
		overflow: hidden;
	}
	#bt img{
		position: absolute;
		top: 0;
		left: 0;
		width: 500px;
		height: 500px;
	}
</style>

3，js实现功能

分析发现，整个效果就是，鼠标进入图片时生效，鼠标离开图片时隐藏半透明图层和大图。
鼠标进入图片（左边盒子）时，根据鼠标的实时位置，对应移动半透明图层的位置，同时保证半透明图层始终位于图片的框内。
很明显，半透明图层在左边盒子的实时位置，就是等于当前鼠标的位置减去左边盒子的位置（pageX、pageY、offsetLeft、offsetTop）。
接着根据半透明图层的位置，移动大图在右边盒子的位置，从而实现局部放大效果。
下面是代码：

<script type="text/javascript">
	window.onload = function(){
		var yt = document.getElementById("yt");
		var yel = document.getElementById("yel");
		var bt = document.getElementById("bt");
		var img = bt.querySelector("img");
		//鼠标进入小盒子
		yt.addEventListener("mouseenter", function(){
			yel.style.display = "block";
			bt.style.display = "block";
		});
		//鼠标离开小盒子
		yt.addEventListener("mouseleave", function(){
			yel.style.display = "none";
			bt.style.display = "none";
		});
		//鼠标在小盒子内移动
		yt.addEventListener("mousemove", function(e){
			var X = e.pageX - this.offsetParent.offsetLeft 
			        - yel.offsetWidth / 2;
			var Y = e.pageY - this.offsetParent.offsetTop 
			        - yel.offsetHeight / 2;
			//让小黄块始终在小盒子内部
			var newX;
			var newY;
			if(X < 0){
				newX = 0;
			}else if(X > yt.offsetWidth - yel.offsetWidth){
				newX = yt.offsetWidth - yel.offsetWidth;
			}else{
				newX = X ;
			}
			if(Y < 0){
				newY = 0;
			}else if(Y > yt.offsetHeight - yel.offsetHeight){
				newY = yt.offsetHeight - yel.offsetHeight;
			}else{
				newY = Y ;
			}
			yel.style.left = newX + "px";
			yel.style.top = newY + "px";
			
			//让大图片随之移动
			var imgMoveMax = img.offsetWidth - bt.offsetWidth;
			var boxMoveMax = yt.offsetWidth - yel.offsetWidth;
			var bigX = imgMoveMax * newX / boxMoveMax;
			var bigY = imgMoveMax * newY / boxMoveMax;
			img.style.left = -bigX + "px";
			img.style.top = -bigY + "px";
		});
	}
</script>

4，最终动态效果图

js仿京东放大镜效果#JAVASCRIP