在网站开发中,实现放大镜效果是很常见的需求。利用jQuery可以很方便地实现此功能,下面通过示例来展示实现放大镜比例的方法。
// HTML结构 <div class="img-box"> <img src="大图地址" data-img="中图地址" alt="图片"> <div id="zoom" style="width: 200px; height: 200px; display: none;"></div> </div> // CSS样式 .img-box { position: relative; } #zoom { position: absolute; top:0; left: 100%; border: 1px solid #ccc; overflow: hidden; } // jQuery代码 var zoom = $("#zoom"); var img = zoom.prev(); zoom.width(img.width() / 放大比例); zoom.height(img.height() / 放大比例); img.hover(function() { zoom.show(); }, function() { zoom.hide(); }).mousemove(function(e) { var left = e.pageX - zoom.width() / 2 - img.offset().left; var top = e.pageY - zoom.height() / 2 - img.offset().top; if (left< 0) { left = 0; } else if (left >img.width() - zoom.width()) { left = img.width() - zoom.width(); } if (top< 0) { top = 0; } else if (top >img.height() - zoom.height()) { top = img.height() - zoom.height(); } zoom.css({ left: left, top: top }); var rateX = left / (img.width() - zoom.width()); var rateY = top / (img.height() - zoom.height()); var bigImg = zoom.next(); bigImg.css({ left: -(bigImg.width() - zoom.width()) * rateX, top: -(bigImg.height() - zoom.height()) * rateY }) });
上述代码中使用了data-img属性存储中图地址,当鼠标移到图片上时展示放大镜,并利用mousemove事件实现放大镜跟随鼠标移动的效果。同时,根据放大镜在中图上的位置计算出对应的大图显示部分。
最后,通过CSS样式实现放大镜和大图的样式,通过修改放大镜的尺寸实现放大比例。