效果：
1、 鼠标放上去会有半透明遮罩、右边会有大图片局部图
2、 鼠标移动时右边的大图片也会局部移动
放大镜的关键原理：
鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；
放大镜的移动方向和大图片的移动方向：横向和纵向都是相反，才可以保证同步；
页面元素：
技术点：事件捕获，定位
难点：计算
需要元素：小图片和大图片，存放小图片和大图片的容器，有一个放大镜；
涉及到的技术点：
（1） 鼠标事件的捕获：onmouseover（进入）、onmouseout（移除）、onmousemove（移动）
（2） offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY
- offsetLeft子元素相对于父元素的左位移
- offsetWidth，offsetHeight一个元素的宽度和高度，宽度和高度是不包括滚动条的。
event.clientX、event.clientY鼠标的X轴和Y轴，相对于整个页面的坐标，而不是子元素
- offsetLeft和style.left对比：
（1）、style.left返回的是字符串，如30px、offsetLeft返回的是数值30；
（2）、style.left是可读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left；
（3）、style.left的值需要事先定义，否则取到的值为空。
style.left只针对在HTML中写的值有效，样式表中无法定义style.left;
制作放大镜所需要的计算
》重点：如何让小图片上的放大镜和大图片同步移动
关键：小图片的比例和大图片的比例是一样的，放大镜比例和右侧大的容器比例是一样的；他们之间的比例是相同的
移动时的比例计算：
放大镜核心计算公式：
编码步骤：
1． 新建html文件；（小图片和大图片的容器盛放）
<div id="demo"> ???<div id="small-box"> ???????<div id="mark"></div> ???????<div id="float-box"></div> ???????<img src="imgs/macbook-small.jpg"/> ???</div> ???<div id="big-box"> ???????<img src="imgs/macbook-big.jpg"/> ???</div></div>
2． 设置样式（放大镜漂浮在小容器里面，并且具有一定的透明度，大图片隐藏）
<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 {/*应该是把图片放在这个上面，它的透明度为0，是个block*/ ???position: absolute; ???display: block; ???width: 400px; ???height: 255px; ???background-color: #fff; ???filter: alpha(opacity=0);/*过滤器，目前只有少数浏览器支持*/ ???opacity: 0; ???z-index: 10;}#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>3． js逻辑代码
（1） 先捕获元素
var objDemo=document.getElementById("demo");var objSmallBox=document.getElementById("small-box");var objMarkBox=document.getElementById("mark");var objFloatBox=document.getElementById("float-box");var objBigBox=document.getElementById("big-box");var objBigBoxImg=objBigBox.getElementsByTagName("img")[0]; （2）给小盒子添加事件，移入和移出
移入：浮动的box和和bigBox显示
objSmallBox.onmouseover=function(){ ???objFloatBox.style.display="block"; ???objBigBox.style.display="block";}//移除：浮动的box和bigBox隐藏objSmallBox.onmouseout=function(){ ???objFloatBox.style.display="none"; ???objBigBox.style.display="none";}（2） ???objSmallBox.onmousemove=function(ev){ ???var _event=ev; ???//1.第一件事，跟随鼠标的位置来计算放大镜的位置 ???//计算值： ???var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2; ???var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2; ???//把值赋值给放大镜 ???objFloatBox.style.left=left+"px"; ???objFloatBox.style.top=top+"px";}（4）计算比例
//3计算比例var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight);
（5）
//4利用这个比例计算距离后赋值给右侧的图片objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";）
（6）
//5.优化，在前面加判断,不让其溢出，加判断if(left<0) left=0;if(top<0) top=0;if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth) ???????left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight) ???????top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;
完整源代码：
<!doctype html><html><head> ???<meta charset="UTF-8"> ???<title>放大镜</title> ???<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 {/*应该是把图片放在这个上面，它的透明度为0，是个block*/ ???????????position: absolute; ???????????display: block; ???????????width: 400px; ???????????height: 255px; ???????????background-color: #fff; ???????????filter: alpha(opacity=0);/*过滤器，目前只有少数浏览器支持*/ ???????????opacity: 0; ???????????z-index: 10; ???????} ???????#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> ???<script> ???????//页面加载完毕后执行 ???????window.onload = function () { ???????????//找六个个元素：demo，smallBox,foatBox,mark,bigfloatBox,imgs, ???????????var objDemo=document.getElementById("demo"); ???????????var objSmallBox=document.getElementById("small-box"); ???????????var objMarkBox=document.getElementById("mark"); ???????????var objFloatBox=document.getElementById("float-box"); ???????????var objBigBox=document.getElementById("big-box"); ???????????var objBigBoxImg=objBigBox.getElementsByTagName("img")[0]; ???????????//给小盒子添加事件，移入和移出 ???????????//移入：浮动的box和和bigBox显示 ???????????objSmallBox.onmouseover=function(){ ???????????????objFloatBox.style.display="block"; ???????????????objBigBox.style.display="block"; ???????????} ???????????//移除：浮动的box和bigBox隐藏 ???????????objSmallBox.onmouseout=function(){ ???????????????objFloatBox.style.display="none"; ???????????????objBigBox.style.display="none"; ???????????} ???????????//给小盒子添加鼠标移动事件 ???????????objMarkBox.onmousemove=function(ev){ ???????????????var _event=ev||window.event;//做兼容性，兼容IE ???????????????//1计算值： ???????????????var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2; ???????????????var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2; ???????????????//5.优化，在前面加判断,不让其溢出，加判断 ???????????????if(left<0) left=0; ???????????????if(top<0) top=0; ???????????????if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth) ???????????????????????left=objSmallBox.offsetWidth-objFloatBox.offsetWidth; ???????????????if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight) ???????????????????????top=objSmallBox.offsetHeight-objFloatBox.offsetHeight; ???????????????//2把值赋值给放大镜 ???????????????objFloatBox.style.left=left+"px"; ???????????????objFloatBox.style.top=top+"px"; ???????????????//3计算比例 ???????????????var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth); ???????????????var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight); ???????????????//4利用这个比例计算距离后赋值给右侧的图片 ???????????????objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px"; ???????????????objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px"; ???????????} ???????} ???</script></head><body><div id="demo"> ???<div id="small-box"> ???????<div id="mark"></div> ???????<div id="float-box"></div> ???????<img src="imgs/macbook-small.jpg"/> ???</div> ???<div id="big-box"> ???????<img src="imgs/macbook-big.jpg"/> ???</div></div></body></html>原生JS实现放大镜效果
原文地址：http://www.cnblogs.com/CodingPrince/p/7686803.html