<!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>
.magnifier{
margin: 20px auto;
width: 500px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.magnifier .abber{
position: relative;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid #eee;
}
.magnifier img{
width: 100%;
height: 100%;
}
.magnifier .abber .mark{
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 80px;
height: 80px;
background: rgba(255,0,0,.4);
cursor: move;
}
.magnifier .detail{
display: none;
position: relative;
box-sizing: border-box;
width: 300px;
height: 300px;
overflow: hidden;
}
.magnifier .detail img{
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
</style>
</head>
<body>
<section class="magnifier">
<!-- 缩略图 -->
<div class="abber">
<img src="img/1.jpg" >
<!-- mark遮罩层 -->
<div class="mark"></div>
</div>
<!-- 详情图 -->
<div class="detail">
<img src="img/3.jpg" >
</div>
</section>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
----------------
index.js
$(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‘)
})
})