先来张效果图：

这个特效是跟着慕课网上的视频学的，视频链接如下：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.οnlοad=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.οnmοuseοver=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";};
};

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