效果預覽
1.放大之前
2.放大之後
$(function () {
var _default = {
hoverClass: 'hover-img',
zoomWidth: 155,
zoomHeight: 155,
mainImgWidth: 310, //主圖寬度
mainImgHeight: 310,
offsetTop: 0,
offsetLeft: 0
};
var $zoomPup = $('.zoom-pup');
var $viewImg = $('.view-img'),
$iparent = $viewImg.parent();
$(document).on('mouseover', '.spec-items li', function (e) {
$(this)
.addClass(_default.hoverClass)
.siblings('li')
.removeClass(_default.hoverClass);
$('.spec-img').attr('src', $(this).find('img').attr('src'));
});
$('.main-img')
.mouseenter(function (e) {
$zoomPup.show();
// 計算邊距
var offset = $(this).offset();
_default.offsetTop = offset.top;
_default.offsetLeft = offset.left;
// 大圖展示
$viewImg.attr('src', $(this).find('img').attr('src'));
$iparent.addClass('active');
})
.mousemove(function (e) {
var px = e.pageX,
py = e.pageY; //x座標
var zx = px - _default.zoomWidth / 2 - _default.offsetLeft,
zy = py - _default.zoomHeight / 2 - _default.offsetTop;
var vx = 0,
vy = 0;
zx < 0 && (zx = 0, vx = 0);
zy < 0 && (zy = 0, vy = 0);
var left = _default.mainImgWidth - _default.zoomWidth,
top = _default.mainImgHeight - _default.zoomHeight;
// 計算邊緣
// zx > left ? (zx = left, vx = -1 * _default.zoomWidth / 2) : zx;
// zy > left ? (zy = top, vy = -1 * _default.zoomHeight / 2) : zy;
zx > left ? (zx = left) : zx;
zy > left ? (zy = top) : zy;
// 大圖間距
// 400 / 155 = 2.581
vx = vx + zx * (-2.581);
vy = vy + zy * (-2.581);
// 設置dom
$zoomPup.css({
'left': zx + 'px',
'top': zy + 'px',
'width': _default.zoomWidth,
'height': _default.zoomHeight
});
$viewImg.css({
'left': vx + 'px',
'top': vy + 'px'
});
})
.mouseleave(function (e) {
$iparent.removeClass('active');
$zoomPup.hide();
});
})
代碼段:https://gitee.com/loveliyq/codes/xrm0j3g7i1du2qpe5yhc617