由项目需要，原生写了个详情页图片放大镜的效果，扔上代码供学习分享，也作为日常笔记...
效果如图(例子中偷偷链了张天猫的图片，希望没啥事 -。-)：
实现过程教简单，但我们还是从css开始分析，过程如下（图片已正方形为例）：
css：
/* 图片容器 */
.imgBox{
width: 200px; /* 各位大老爷们看着办 */
height: 200px; /* 各位大老爷们看着办 */
position: relative; /* 必需 */
} /* 图片标签 */
.mainImg{
width: 100%; /* 各位大老爷们看着办，尽量100%好看些[斜眼笑] */
height: 100%; /* 各位大老爷们看着办，尽量100%好看些[斜眼笑] */
} /* 遮罩层-既放大区域 */
.glass{
position: absolute; /* 必需 */
width: 50px; /* 遮罩层宽度 此处是放大4倍，所以为200/4=50 */
height: 50px; /* 遮罩层高度 此处是放大4倍，所以为200/4=50 */
top: -9999px; /* 绝对位置，先放远些 */
left: -9999px; /* 绝对位置，先放远些 */
cursor: move; /* 鼠标样式，好看些 */
background: rgba(0,0,180,0.5); /* 遮罩层样式，好看些 */
} /* 大图所在的容器 */
&nb
