前言：
相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；
(1)首先了解一下放大镜效果的html架构：如下图，它由两部分组成。
html：
第一部分的原理是：设置box的background为需要放大的图片，同时背景的宽高为100%。再将box的宽高设为300px，这样背景图片就可以撑满box了。然后通过监听box的mousemove事件，控制红色小框块的移动。这个红色小框块就是要放大的地方。
第二部分的原理是：设置big里面的img为box的宽度的3倍(这里的3倍就是放大镜的放大倍数，当然这个值是可以自由选择的。)。同时big块的宽高为350px，用来限制img的显示。然后通过移动img的left，top来达到放大镜的效果。
css代码：
html,body {
margin: 0;
padding:0;
}
#box{
width: 300px;
height: 300px;
position: relative;
background: url(12.png);
background-size:100% 100%;
}
#box #small{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: red;
opacity: 0.6;
}
#big{
width: 350px;
height: 350px;
overflow: hidden;
position: relative;
display: none;
}
#big img{
width: 900px;
height: 900px;
position: absolute;
}
(2)js部分：
var box = document.querySelector('#box');
var small = document.querySelector('#small');
var big = document.querySelector('#big');
var img = document.querySelector('#imgs');
//监听box的mousemove事件
box.onmousemove = function(e){
//获取鼠标的x、y坐标。为什么要减去50呢？为了让鼠标刚好在small红色小方块的中心。
var top = e.clientY-50;
var left = e.clientX-50;
//限制small小方块移出box的范围
if(top > 200){top = 200};
if(top < 0){top = 0};
if(left > 200){left = 200};
if(left < 0){left = 0};
//动态设置small小方块的位置，让小方块跟随鼠标移动
small.style.left = left + 'px';
small.style.top = top + 'px';
//让big里面的图片跟随鼠标的移动而移动。这里为什么要乘以(-3)呢？因为big里面的大图是box的3倍。鼠标在box上面向右移动1px，那么big里面的大图就要向左移动(1 x -3)px才能达到我们想要的效果。
img.style.top = top*(-3) + 'px';
img.style.left = left*(-3) + 'px';
}
//监听box的onmouseenter事件
box.onmouseenter = function(e){
//当鼠标进入box范围的时候，显示放大效果
big.style.display='block';
}
//监听box的onmouseleave 事件
box.onmouseleave = function(e){
//当鼠标移出box范围的时候，隐藏放大效果
big.style.display='none';
}
好了，css+js实现放大镜的功能到这里就完成了。很简单吧。不过这只是简单的实现，还有使用canvas实现的方法。
不能只看不动手的喔，自己动手敲一遍，就好理解很多了。
