<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="css/reset.min.css" />
<style>
* {
margin: 0px;
padding: 0px;
}
.magnifier {
box-sizing: border-box;
margin: 20px auto;
width: 750px;
}
.magnifier .abbre {
position: relative;
box-sizing: border-box;
width: 300px;
height: 400px;
float: left;
}
.magnifier .abbre img {
width: 100%;
height: 100%;
}
.magnifier .abbre .mark {
display: none;
position: absolute;
top: 0px;
left: 0px;
cursor: move;
width: 100px;
height: 100px;
background: tomato;
opacity: 0.4;
}
.magnifier .origin {
display: none;
float: left;
box-sizing: border-box;
width: 450px;
height: 450px;
overflow: hidden;
position: relative;
}
.magnifier .origin img {
z-index: 2;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<section>
<div class="magnifier clearfix">
<div class="abbre">
<img src="images/m1.jpg" alt="">
<div class="mark"></div>
</div>
<div class="origin">
<img src="images/mbig.jpg" alt="">
</div>
</div>
</section>
<script src="js/jquery-1.10.0.min.js"></script>
<script>
let $abbre = $(".abbre");
let $mark = $abbre.find(".mark");
let $origin = $(".origin");
let $originImg = $origin.find("img");
let abbreW = $abbre.outerWidth(),
abbreH = $abbre.outerHeight(),
abbreOffset = $abbre.offset(),
markW = $mark.outerWidth(),
markH = $mark.outerHeight(),
originW = $origin.outerWidth(),
originH = $origin.outerHeight(),
originImgW = abbreW / markW * originW,
originImgH = abbreH / markH * originH;
//1,计算大图的大小
$originImg.css({
width: originImgW,
height: originImgH
})
function computedMark(ev) {
//2.计算mark的位置
let abbreOffset = $abbre.offset(),
markL = ev.pageX - abbreOffset.left - markW / 2,
markT = ev.pageY - abbreOffset.top - markH / 2;
let minL = 0,
minT = 0,
maxL = abbreW - markW,
maxT = abbreH - markH;
markL = markL < minL ? minL : (markL > maxL ? maxL : markL);
markT = markT < minT ? minT : (markT > maxT ? maxT : markT);
$mark.css({
left: markL,
top: markT
});
//3.控制大图移动的距离
$originImg.css({
left: -markL / abbreW * originImgW,
top: -markT / abbreH * originImgH
})
}
$abbre.mouseenter(function (ev) {
$mark.css('display', 'block');
$origin.css('display', 'block');
computedMark(ev);
}).mouseleave(function (ev) {
$mark.css('display', 'none');
$origin.css('display', 'none');
}).mousemove(function (ev) {
computedMark(ev);
})
</script>
</body>
</html>
