用JS实现放大镜特效

先来张效果图：

 

这个特效是跟着慕课网上的视频学的，视频链接如下：https://www.imooc.com/learn/32

源码和技术点已经上传到附件，有需要的可以查看、下载。

下面直接上代码（PS：代码中的注释是根据个人理解添加的，并不是老师原有的注释）：

页面结构：

<div id="demo">
	<!--左侧小图片区域-->
    <div id="small-box">		
        <div id="mark"></div><!--左侧可以点击区域，类似于遮罩层，让鼠标一直在这个区域上移动。-->
        <div id="float-box"></div><!--左侧放大镜区域-->
        <img src="macbook-small.jpg"/>
    </div>
	<!--右侧大图片区域-->
    <div id="big-box">
        <img src="macbook-big.jpg"/>
    </div>
</div>

CSS样式：

<style>
	* {
		margin: 0;
		padding: 0
	}

	#demo {
		display: block;
		width: 400px;
		height: 255px;
		margin: 50px;
		position: relative;
		border: 1px solid #ccc;
	}

	#small-box {
		position: relative;
		z-index: 1;
	}

	#float-box {
		display: none;
		width: 160px;
		height: 120px;
		position: absolute;
		background: #ffffcc;
		border: 1px solid #ccc;
		filter: alpha(opacity=50);
		opacity: 0.5;
	}

	#mark {
		position: absolute;
		display: block;
		width: 400px;
		height: 255px;
		background-color: #fff;
		filter: alpha(opacity=0);
		opacity: 0;
		z-index: 10;
		cursor:move;
	}

	#big-box {
		display: none;
		position: absolute;
		top: 0;
		left: 460px;
		width: 400px;
		height: 300px;
		overflow: hidden;
		border: 1px solid #ccc;
		z-index: 1;;
	}

	#big-box img {
		position: absolute;
		z-index: 5
	}
</style>

JS代码：

window.onload=function(){
	var demoObj = document.getElementById("demo");//整个div所在对象

	var smallBoxObj = document.getElementById("small-box");//左侧小图片区域
	var markObj = document.getElementById("mark");//左侧可以点击区域
	var floatBoxObj = document.getElementById("float-box");//左侧放大镜区域
	var bigBoxObj = document.getElementById("big-box");//右侧大图片区域
	var bigBoxImageObj = bigBoxObj.getElementsByTagName("img")[0];
	//当鼠标进入到mark区域时，放大镜显示，大图片区域显示
	markObj.onmouseover=function(){
		floatBoxObj.style.display="block";
		bigBoxObj.style.display="block";
	};

	//当鼠标离开mark区域时，放大镜隐藏，大图片区域也隐藏
	markObj.onmouseout = function(){
		floatBoxObj.style.display="none";
		//bigBoxObj.style.display="none";
	};

	//当鼠标在mark区域移动时，放大镜和大图片区域根据鼠标的移动而移动
	markObj.onmousemove = function(ev){
		//1、先计算放大镜的移动情况
		var _event = ev || window.event;
		/*使用这种写法，鼠标图标一直在放大镜区域的左上角，不太美观，所以改成让其在放大镜区域的中间显示，也就是offsetWidth、offsetHeight的一半
		var left = _event.clientX - demoObj.offsetLeft - smallBoxObj.offsetLeft;				
		var top = _event.clientY - demoObj.offsetTop - smallBoxObj.offsetTop;
		*/

		var left = _event.clientX - demoObj.offsetLeft - smallBoxObj.offsetLeft - floatBoxObj.offsetWidth/2;			
		var top = _event.clientY - demoObj.offsetTop - smallBoxObj.offsetTop - floatBoxObj.offsetHeight/2;
		
		//1.1解决放大镜出界问题：离开smallBox所在区域
		//左侧出界：左侧边界的offsetLeft(_event.clientX - demoObj.offsetLeft - smallBoxObj.offsetLeft)比放大镜的offsetWidth/2还小时，为了满足“鼠标一直在中间显示”，此时放大镜将超出边界显示，此时让其left为0，与左侧边界重合

		//右侧出界：floatBoxObj必须markObj所在区域之内显示，当floatBoxObj的右侧不在markObj区域内时，右侧将出界，那么left应该是markObj的宽度与floatBoxObj宽度之差（在markObj或smallBoxObj的区域之内都可以，只要不超出这个区域的边界即可，因为左侧是在markObj上面移动，所以这里用markObj）				
		if(left<0){	
			left=0;
		}else if(left>(markObj.offsetWidth-floatBoxObj.offsetWidth)){
			//console.log("333333333333");
			left = markObj.offsetWidth-floatBoxObj.offsetWidth;
		}
		//同理解决高度出界的问题
		if(top<0){top=0;}
		else if(top>(markObj.offsetHeight-floatBoxObj.offsetHeight)){
			top = markObj.offsetHeight-floatBoxObj.offsetHeight;
		}	

		//console.log("left="+left+"\ttop="+top);
		//放大镜区域所在位置
		floatBoxObj.style.left = left+"px";
		floatBoxObj.style.top = top+"px";

		//2、在大图片区域显示图片
		//(????计算方法没太懂)
		var percentX = left / (markObj.offsetWidth - floatBoxObj.offsetWidth);
		var percentY = top / (markObj.offsetHeight - floatBoxObj.offsetHeight);

		bigBoxImageObj.style.left = -percentX * (bigBoxImageObj.offsetWidth - bigBoxObj.offsetWidth) + "px";
		bigBoxImageObj.style.top = -percentY * (bigBoxImageObj.offsetHeight - bigBoxObj.offsetHeight) + "px";
	};
};

在大图上显示那块儿没太懂，学习视频里面讲的也没看懂，有看懂的还望告知，谢谢！