1 页面布局
放大镜的原理是：准备两张相同的图片，一张是小图显示在商品的展示区域，另一张大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。HTML示例代码如下。CSS代码详见本书源码。
1 <div class="box">
2 <img src="images/small.jpg" >
3 <div class="mask"></div>
4 <div class="big">
5 <img src="images/big.jpg" class="bigImg">
6 </div>
7 </div>
上述代码中，第1行代码的div是整个放大镜区域的容器；第2行代码中的img标签是小图，显示在商品的展示区域；第3行代码中div标签是鼠标移动过程中跟随鼠标的遮罩层；第4行代码的div是大图显示的容器。遮罩层和大图默认是隐藏状态。
2 功能实现
（1）.获取元素
var box = document.querySelector('.box');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var bigIMg = document.querySelector('.bigImg');
上述代码中，分别获取放大镜盒子、遮罩层、显示大图的区域和大图。
（2）.显示与隐藏遮罩层和大图区域
1 box.addEventListener('mouseover', function () {
2 mask.style.display = 'block';
3 big.style.display = 'block';
4 })
5 box.addEventListener('mouseout', function () {
6 mask.style.display = 'none';
7 big.style.display = 'none';
8 })
上述代码为放大镜盒子添加onmouseover和onmouseout事件及其处理程序，当鼠标进入放大镜盒子时，遮罩层和大图区域显示；当鼠标离开放大镜盒子时，遮罩层和大图区域隐藏。
（3）.移动遮罩层
当鼠标在放大镜盒子内移动时，遮罩层跟着鼠标移动，示例代码如下。
1 box.addEventListener('mousemove', function (e) {
2 var x = e.pageX - this.offsetLeft;
3 var y = e.pageY - this.offsetTop;
4 var maskX = x - mask.offsetWidth / 2;
5 var maskY = y - mask.offsetHeight / 2;
6 var maskMax = box.offsetWidth - mask.offsetWidth;
7 if (maskX <= 0) {
8 maskX = 0;
9 } else if (maskX >= maskMax) {
10 maskX = maskMax;
11 }
12 if (maskY <= 0) {
13 maskY = 0;
14 } else if (maskY >= maskMax) {
15 maskY = maskMax;
16 }
17 mask.style.left = maskX + 'px';
18 mask.style.top = maskY + 'px';
上述代码中，第1行代码为放大镜盒子绑定鼠标移动事件及其处理程序；第2-3行代码获取鼠标在盒子内的坐标；第4-5行代码获取遮罩层的坐标；第6-16行代码限制遮罩层的横纵坐标最小值是0，最大值是盒子的宽度减去遮罩层的宽度；第17-18行代码设置遮罩层的横纵坐标。
（4）.按照比例移动大图
根据遮罩层在小图中的位置，按比例在大图中完成相应区域的展示，在第3步的第18行代码后面添加以下代码。
// 大图能移动的总距离=大图的宽度-大图区域的宽度
19 var bigMax = bigIMg.offsetWidth - big.offsetWidth;
// 大图的横纵坐标 = 遮罩层横纵坐标*大图能移动的总距离/遮罩层能移动的总距离
20 var bigX = maskX * bigMax / maskMax;
21 var bigY = maskY * bigMax / maskMax;
// 遮罩层与大图的移动方向相反
22 bigIMg.style.left = -bigX + 'px';
23 bigIMg.style.top = -bigY + 'px';
第19行代码计算大图移动的最大距离；第20-21行代码计算大图的横纵坐标；第22-23行代码设置大图的横纵坐标。