JavaScript | 图片放大特效

在电商网站中，经常可以看到商品详情展示页中，鼠标经过商品的图片即可看到一个放大查看区域的细节图片。那么，图片放大特效是如何实现的呢?通常情况下，会准备两张相同的图片。一张是小图显示在商品的展示区域，另一张大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。接下来将通过JavaScript的鼠标事件来完成图片放大特效，具体步骤如下所示。

(1)编写HTML 页面

?

1 2 3 4

<div id="box" class="box"> <div id="smallBox" class="small"> < img src="images/small.jpg"> <!-- 小图 --> <div id="mask" class="mask"></div> <!-- 遮罩 --><br></div><br><div id-"bigBox" class-"big"><br>< img id="bigImg" src-"images/big-jpg"> <!-- 大图 --><br></div><br></div>

　　在上述代码中，id为smallBox的<div>用于显示商品图片的小图:id 为 mask 的<div>用于鼠标经过小图时查看的图片区域(遮罩);id为bigBox的<div>用于显示商品大图的对应查看区域。接下来设置 CSS 样式，具体代码请参考本书源码。遮罩和小图的展示效果如图 8-20 所示。值得一提的是，默认情况下，遮罩是隐藏的，只有鼠标经过小图时才会显示。

(2)显示与隐藏“遮罩”和“局部放大图”

接下来，编写 JavaScript代码，添加鼠标经过与移出事件，完成遮罩和局部放大图的显示与隐藏，具体代码如下

?

1 2 3 4 5 6 7 8 9 10 11

<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）遮罩的移动

 下面为小图添加鼠标移动事件，实现遮罩跟着鼠标移动的效果，具体代码如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$('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 行下添加以下代码。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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行后添加以下代码

?

1 2 3 4 5 6 7 8 9

//大图片能够移动的总距离=大图的宽度-大盒子的宽度 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行代码根据与遮罩的位置计算出大图的显示位置。需要注意的是，遮罩与大图的移动方向相反，因此在时需要添加负号(-)。完成上述操作后，移动鼠标，即可看到图片放大特效。