淘先锋技术网

首页 1 2 3 4 5 6 7

在网站开发中,实现放大镜效果是很常见的需求。利用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样式实现放大镜和大图的样式,通过修改放大镜的尺寸实现放大比例。