$(function(){
let $magnifier = $(‘.magnifier‘),
$abbre =$magnifier.find(‘.abber‘),
$mark = $magnifier.find(‘.mark‘),
$detail = $magnifier.find(‘.detail‘),
$detailIMG = $detail.find(‘img‘);
// 动态计算出大图的大小
let abbreW = $abbre.width(),
abbreH = $abbre.height(),
abbreOffset = $abbre.offset(),
markW = $mark.width(),
markH = $mark.height(),
detailW = $detail.width(),
detailH = $detail.height(),
detailIMGW = 0,
detailIMGH = 0;
// 计算 图片比例的宽高
detailIMGW = detailW / (markW / abbreW);
detailIMGH = detailH / (markH / abbreH);
// console.log(detailIMGW,detailIMGH);
// 设置图片的宽高
$detailIMG.css({
width:detailIMGW,
height:detailIMGH
})
// 计算"MARK/大图"移动的位置
const computed = function(ev){
let curL = ev.pageX - abbreOffset.left - markW/2,
curT = ev.pageY - abbreOffset.top - markH/2;
// 边界判断
let minL = 0,
minT = 0,
maxL = abbreW - markW,
maxT = abbreH - markH;
curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
$mark.css({
left:curL,
top:curT
})
$detailIMG.css({
left: -curL / abbreW * detailIMGW,
top: -curL / abbreH * detailIMGH
})
}
// 事件触发
$abbre.mouseenter(function(ev){
$mark.css(‘display‘,‘block‘)
$detail.css(‘display‘,‘block‘)
computed(ev);
}).mousemove(function(ev){
computed(ev);
}).mouseleave(function(ev){
$mark.css(‘display‘,‘none‘)
$detail.css(‘display‘,‘none‘)
})
})
