<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>放大鏡</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 200px 400px;
}
div.small,
div.big {
width: 250px;
height: 250px;
position: relative;
display: inline-block;
top: 0;
overflow: hidden;
border: 1px solid #333;
}
div.big>img{
position: absolute;
left:0;
top:0;
}
div.glass {
width: 125px;
height: 125px;
background: rgba(117, 117, 117, 0.4);
position: absolute;
left: 0;
top: 0;
border:2px solid rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div class="small">
<div class="glass"></div>
<img src="./Small.jpg" alt="">
</div>
<div class="big">
<img src="./Big.jpg" alt="">
</div>
</body>
<script>
$('.glass').mousedown(function (e) {
let mouseX = e.pageX; //獲取鼠標下落位置
let mouseY = e.pageY;
let oldleft = $('.glass').position().left; //獲取放大鏡座標
let oldtop = $('.glass').position().top;
$(window).mousemove(function (e) {
// 移動放大鏡
let mouseMoveX = e.pageX - mouseX //左右移動距離
let mouseMoveY = e.pageY - mouseY //上下移動距離
// 改變鏡片位置
let newLeft = mouseMoveX + oldleft;
let newtop = mouseMoveY + oldtop
// 規定鏡片界限
let smallW = $('.small').width() //獲取小盒子寬度
let smallH = $('.small').height() //獲取小盒子寬度
let glassW = $('.glass').width() //獲取鏡片的寬度
let glassH = $('.glass').height() //獲取鏡片的高度
let bigW = $('.big').width() //獲取大盒子寬度
let bigH = $('.big').width() //獲取大盒子高度
if (newLeft <= 0) {
newLeft = 0
}
if (newLeft >= smallW - glassW) {
newLeft = smallW - glassW
}
if (newtop <= 0) {
newtop = 0
}
if (newtop >= smallH - glassH) {
newtop = smallH - glassH
}
//改變玻璃位置
$('.glass').css({
left: newLeft,
top: newtop,
})
//大小圖聯動
let biliW = newLeft/glassW
let biliH = newtop/glassH
$('div.big>img').css({
left:-bigW*biliW,
top:-bigH*biliH
})
return false
})
$(window).mouseup(function (e) {
$(window).off()
return false
})
return false
})
</script>
</html>