放大镜效果代码实现
2021-05-14 本文已影响0人
MiSiTeWang
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.magifier {
margin: 20px auto;
width: 500px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.magifier .abbre {
width: 200px;
height: 200px;
position: relative;
box-sizing: border-box;
}
.magifier .abbre img {
width: 100%;
height: 100%;
}
.magifier .abbre .mask {
position: absolute;
z-index: 3;
display: none;
top: 0;
left: 0;
width: 80px;
height: 80px;
border: 1px solid #aaa;
background: 50% top no-repeat #fede4f;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
cursor: move;
}
.magifier .detail {
box-sizing: border-box;
position: relative;
/* 为什么此处没有宽高的时候，小图展示不全？？？ */
width: 300px;
height: 300px;
overflow: hidden;
display: none;
}
.magifier .detail img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
</style>
</head>
<body>
<section class="magifier">
<!-- 缩略图 -->
<div class="abbre">
<img src="https://img11.360buyimg.com/n1/jfs/t1/175546/26/9058/217713/609b376dEc171ccc5/1f6c5290df3830da.jpg"
alt="" sizes="" srcset="" />
<div class="mask"></div>
</div>
<!-- 详情图 -->
<div class="detail">
<img src="https://img11.360buyimg.com//n0/jfs/t1/175546/26/9058/217713/609b376dEc171ccc5/1f6c5290df3830da.jpg"
alt="" />
</div>
</section>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(function () {
let $magifier = $(".magifier");
$abbre = $magifier.find(".abbre");
$mask = $abbre.find(".mask");
$detail = $magifier.find(".detail");
$detailIMG = $detail.find("img");
let abbreOffset = $abbre.offset(); //abbre的相对于document的偏移，原生的aip为offsetLeft
// console.log("$magifier", $magifier, $abbre, $mask, $detail, $detailIMG);
// console.log("mousemove");
// 计算出大图的大小
let abbreW = $abbre.width();
(abbreH = $abbre.height()),
(maskW = $mask.width()),
(maskH = $mask.height()),
(detailW = $detail.width()),
(detailH = $detail.height()),
(detailIMGW = 0),
(detailIMGH = 0);
// abbre/mask = detailIMG/detail;
// abbre*detail/mask = detailIMG;
detailIMGW = (abbreW * detailW) / maskW;
detailIMGH = (abbreH * detailH) / maskH;
// console.log("大图的宽高为", detailIMGW, detailIMGH);
$detailIMG.css({
width: detailIMGW,
height: detailIMGH,
});
// mask的位置
// 鼠标的位置 - abbre的偏移 - mask的宽高的一半
// mask不可以超过的边界
// 最小的top/left = 0
// 最大top/left = abbre - mask;
const computed = function computed(ev) {
console.log("ev", ev);
let curLeft = ev.pageX - abbreOffset.left - maskW / 2;
let curTop = ev.pageY - abbreOffset.top - maskH / 2;
// 处理边界情况
let minL = 0,
minT = 0,
maxL = abbreW - maskW,
maxT = abbreH - maskH;
curLeft = curLeft < minL ? minL : curLeft > maxL ? maxL : curLeft;
curTop = curTop < minT ? minT : curTop > maxT ? maxT : curTop;
$mask.css({
left: curLeft,
top: curTop,
});
// mask在abbre里面移动的距离/abbre的宽度 = detailIMG在detail移动的距离/detail的宽度
$detailIMG.css({
left: -curLeft / abbreW * detailIMGW,
top: -curTop / abbreH * detailIMGH
})
};
$abbre
.mouseenter(function (ev) {
$mask.css("display", "block");
$detail.css("display", "block");
computed(ev);
})
.mousemove(function (ev) {
computed(ev);
})
.mouseleave(function (ev) {
$mask.css("display", "none");
$detail.css("display", "none");
});
});
</script>
</html>
