根据项目的需要，我原本写了一个详细的页面图片放大镜效果，扔了代码学习分享，也作为日常笔记使用.

效果如图(示例中天猫的一张图片被偷偷锁了起来，希望没有发生-。-):

实现过程很简单，但我们还是从css开始，过程如下(比如图片是正方形的):

css:

/*图片容器*/。imgBox { width: 200px/*由您决定，先生们*/height : 200 px；/*由各位先生决定*/位置：相对；/*必选*/}/*图片标签*/。main IMg { width : 100%；/*所有的绅士都会做自己想做的事，努力让自己看起来100%[眯眼]*/height : 100%；/*你们这些绅士可以为所欲为。尽量100%[眯眼] */}/*蒙版图层-放大面积*/。玻璃{ position:绝对值；/*必需*/width : 50px；/*这里掩膜层的宽度放大了4倍，所以是200/4=50 */height : 50px；/*这里掩膜层的高度放大了4倍，所以是200/4=50 */Top:-999 px；/*绝对位置，先放远一点*/left :-999 px；/*绝对位置，先放远一点*/cursor:移动；/*鼠标样式，更好看*/background:rgba (0，0，180，0.5)；/*蒙版图层样式，更好看*/}/*大图所在的容器*/。imgmax { position : absolute/*必选*/overflow:隐藏；/*必要时，覆盖更大的图片[斜视]*/left : 210 px；/*必选，这里距离原图左边10像素*/top : 0；/*必选，这里是从顶部开始的0像素*/width : 200 px；/*这里放大图片容器的宽度放大了4倍，也就是200，和原来的图片容器一样大。如果这里是400，放大2*4倍，那么对应的放大图片应该是200 * 4 * 2=1600 */高度3360 200 px/*这里放大图片容器的高度放大了4倍，就是200，和原来的图片容器一样大。如果这里是400，放大2*4倍，那么对应的放大图片应该是200 * 4 * 2=1600 */display 3360 None；/* hide */}。maximg {位置：绝对；/*必需*/width : 800 px；/*这里放大4倍，所以是200*4=800，受放大图片所在容器的影响。规则如上*/height : 800 px；/*这里放大4倍，所以是200*4=800，受放大图片所在容器的影响。规则如上*/}上面的css需要注意几个位置和缩放比例，所以要注意调整。

写完风格后，看看布局：

html:

！-图片容器-div class=' j _ img box img box '！-要放大的图像-原始图像-img class=' j _ main img main img ' src=' http:http://img.alicdn.com/Bao/uploaded/i7/tb1xpe _ n