JavaScript | 图片放大特效
在电商网站中，经常可以看到商品详情展示页中，鼠标经过商品的图片即可看到一个放大查看区域的细节图片。那么，图片放大特效是如何实现的呢?通常情况下，会准备两张相同的图片。一张是小图显示在商品的展示区域，另一张大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。接下来将通过JavaScript的鼠标事件来完成图片放大特效，具体步骤如下所示。
(1)编写HTML 页面
<div id="box" class="box"> <div id="smallBox" class="small"> < img src="images/small.jpg"> <!-- 小图 --> <div id="mask" class="mask"></div> <!-- 遮罩 -->
</div>
<div id-"bigBox" class-"big">
< img id="bigImg" src-"images/big-jpg"> <!-- 大图 -->
</div>
</div>
在上述代码中，id为smallBox的<div>用于显示商品图片的小图:id 为 mask 的<div>用于鼠标经过小图时查看的图片区域(遮罩);id为bigBox的<div>用于显示商品大图的对应查看区域。接下来设置 CSS 样式，具体代码请参考本书源码。遮罩和小图的展示效果如图 8-20 所示。值得一提的是，默认情况下，遮罩是隐藏的，只有鼠标经过小图时才会显示。
(2)显示与隐藏“遮罩”和“局部放大图”
接下来，编写 JavaScript代码，添加鼠标经过与移出事件，完成遮罩和局部放大图的显示与隐藏，具体代码如下
<script>
function $(id){ // 根据id值获取元素对象
return document.getElementById(id);
}
$('smallBox').onmouseover=function(){ // 鼠标经过盒子显示遮罩和大图$('mask').style.display -'block';$('bigBox').style.display = 'block';
};
$('smallBox').onmouseout=function(){// 鼠标离开盒子隐藏遮罩和大图
$('mask').style.display = 'none';
$('bigBox').style.display ='none';
};
</script>
上述2~4行代码，用于根据id值获取指定的元素对象，第5~12行代码为小图添加 mouseover 和mouseout 事件及其处理程序，并通过修改遮罩和局部放大图的display属性完成显示与隐藏。完成设置后，鼠标经过商品图，就会放大到只有一部分。
（3）遮罩的移动
下面为小图添加鼠标移动事件，实现遮罩跟着鼠标移动的效果，具体代码如下
$('smal1Box').onmousemove - function (event) (
var event = event ll window.event;
// 鼠标在页面中的坐标
var pageX-event.pageX || event.clientx + document.documentElement.scrollLeft.
var pageY-event.pageY || event.clientY + document.documentElement.scrollTop;
// 计算鼠标的位置距盒子的距离
var boxx - pagex - $("box') .offsetleft;
var boxY = pageY - $('box').offsetTop;
// 计算迷罩的位置
var maskx - boxx - $(mask'l.offsetwidth / 2;
var masky = boxY - $('mask').offsetHeight / 2;
// 修改遮罩的显示位置
('mask').style.left = maskX + 'px';
$('mask').style.top = masky + 'px';
};
上述第 4~8行代码用于计算鼠标移动时距商品图左上角的距离(left和top值)。同时为了查看鼠标经过周围区域的图片，通过第1011行代码，利用鼠标距离图片的位置减去遮罩宽高的二分之一的方式，计算鼠标经过后遮罩的显示位置。第 13~14行代码用于鼠标移动，修改造罩的显示位置。
(4)限定遮罩的可移动范围
从效果图可以看出，鼠标在移动时，遮罩会移出图片的显示区域。因此，接来需要对遮罩的可移动范围进行限定。在第(3)步的第 11 行下添加以下代码。
if(maskx<0)1 // 限定遮罩横向最小的可移动距离为0
maskX=0;
}
//限定横向最大的移动距离不能不超过图片的宽度减去遮罩的宽度
if (maskX >$('smallBox').offsetWidth - $('mask’).offsetwidth) {
maskX - $('smallBox').offsetWidth - s(mask') .offsetwidth
}
if(maskY<0){ //限定遮罩纵向最小的可移动距离为0
masky=0;10
}
//限定纵向最大的移动离不能不超过图片的高度减去遮罩的高度
if (maskY > $(smallBox').offsetHeight - $('mask").offsetheight){
maskY -$('smallBox').offsetHeight -$('mask').offsetHeight;
}
上述第1~3行和第8~10行代码用于鼠标滑过商品图左侧和顶部边缘时，限定遮罩在商品图上最小的可移动距离。效果如图 8-23 左侧所示。上述第5~7和第12~14行代码用于设置鼠标滑过商品图右侧和底部边缘时，限定遮罩在商品图上最大的可移动距离。
（5）按照比例移动大图
最后，按照遮罩在商品图（小图)中的显示位置，按比例地在大图中完成相应区域的展示。接下来，在第（3）步的第14行后添加以下代码
//大图片能够移动的总距离=大图的宽度-大盒子的宽度
var bigImgToMove = $('bigImg').offsetwidth - $(bigBox') .offsetwidt
//遮罩能够移动的总距离=小盒子的宽度-遮罩的宽度
var maskToMove = $('smallBox') .offsetWidth -$('mask').offsetwidth;
//计算移动比例rate=大图片能够移动的总距离/遮罩能够移动的总距离
var rate=bigImgToMove/ maskToMove;
//设置大图片当前的位置=rate*遮罩当前的位置
$('bigImg') .style.left = - rate * maskX + 'px';
$('bigImg') .style.top = - rate * maskY + 'px';
上述第1~6行代码用于计算大图与遮罩可移动距离的比例值rate第8~9行代码根据与遮罩的位置计算出大图的显示位置。需要注意的是，遮罩与大图的移动方向相反，因此在时需要添加负号(-)。完成上述操作后，移动鼠标，即可看到图片放大特效。
