放大镜
1. “缩略图”窗口与“原图”窗口中放置的是同一个图片，但“缩略图”窗口中的图片被缩小为400px，
而“原图”窗口中的图片保持原始大小，溢出部分设为隐藏
2. 先确定缩放比例，我们假定原图大小为1000px，缩略图大小为400px，缩放比例为2.5
3. 首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）
4. 其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动
5. 鼠标向右移动，“原图”窗口中的图片向左移动，它们的方向是相反的！这是实现原理中的关键环节
6. “放大镜”框的大小不是随意设定的，它与放大倍数有关，如果要放大2.5倍，
html部分：这里需要使用2张一定长度、一定比例的图片。 在页面中按照比例设置2个div存放2张长图，在小图的div中按照一定的比例设置1个。 扩大面积
<div class="nav">
<div id="box">
<img src="./imgs/0_big.jpg" alt="">
<div id="show"></div>
</div>
<div id='image'>
<img src="./imgs/0_big.jpg" alt="">
</div>
</div>
<div>
<li><img src="./imgs/0_big.jpg" alt=""></li>
<li><img src="./imgs/1_big.jpg" alt=""></li>
<li><img src="./imgs/2_big.jpg" alt=""></li>
<li><img src="./imgs/3_big.jpg" alt=""></li>
<li><img src="./imgs/4_big.jpg" alt=""></li>
</div>
主要CSS样式：溢出隐藏overflow:hidden、隐藏视口显示:none、用于定位位置的主要暴风：键盘关节风mousemove()和键盘hover()
#box {
width: 600px;
height: 600px;
border: 1px solid black;
position: relative;
}
#box img{
width:600px;
height:600px;
}
#image {
width: 500px;
height: 500px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
li {
list-style: none;
float: left;
border: 2px solid black;
}
li img{
width: 100px;
height: 100px;
margin: 8.3px;
}
#show {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
}
.nav {
height: 600px;
width: 910px;
display: flex;
justify-content: space-between;
}
#image img{
position: absolute;
width:1300px;
height:1300px;
}
jquery部分代码最终实现大图对应的连接。 这里需要注意的是jquery 放大 缩小jquery 放大 缩小，大图的连接方向必须与放大区域的连接方向相反。
$('div li img').click(function () {
$('#box img').attr('src',this.src)
$('#image img').attr('src',$('#box img')[0].src)
})
var box = $('#box')
var image = $('#image')
var btn = $('#show')
var flge = false
$('#show').mousedown(function () {
flge = true
$('#box').mousemove(function (e) {
if(flge){
var moveX = e.pageX - 50;
var moveY = e.pageY - 50;
var maxX = e.pageX;
var maxY = e.pageY;
if (moveX < 0) {
moveX = 0;
}
if (moveY < 0) {
moveY = 0;
}
if (moveX > 400) {
moveX = 400;
}
if (moveY > 400) {
moveY = 400;
}
$('#show').css('left', moveX)
$('#show').css('top', moveY)
$('#image img').css('left',(-moveX)*2)
$('#image img').css('top',(-moveY)*2)
}
})
})
$('#show').mouseup(function () {
flge = false
})
最后上传所有代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" nav="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" nav="ie=edge">
<title>Document</title>
<script src="./jquery-3.4.1.js"></script>
<style>
#box {
width: 600px;
height: 600px;
border: 1px solid black;
position: relative;
}
#box img{
width:600px;
height:600px;
}
#image {
width: 500px;
height: 500px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
li {
list-style: none;
float: left;
border: 2px solid black;
}
li img{
width: 100px;
height: 100px;
margin: 8.3px;
}
#show {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
}
.nav {
height: 600px;
width: 910px;
display: flex;
justify-content: space-between;
}
#image img{
position: absolute;
width:1300px;
height:1300px;
}
</style>
</head>
<body>
<div class="nav">
<div id="box">
<img src="./imgs/0_big.jpg" alt="">
<div id="show"></div>
</div>
<div id='image'>
<img src="./imgs/0_big.jpg" alt="">
</div>
</div>
<div>
<li><img src="./imgs/0_big.jpg" alt=""></li>
<li><img src="./imgs/1_big.jpg" alt=""></li>
<li><img src="./imgs/2_big.jpg" alt=""></li>
<li><img src="./imgs/3_big.jpg" alt=""></li>
<li><img src="./imgs/4_big.jpg" alt=""></li>
</div>
<script>
$('div li img').click(function () {
$('#box img').attr('src',this.src)
$('#image img').attr('src',$('#box img')[0].src)
})
var box = $('#box')
var image = $('#image')
var btn = $('#show')
var flge = false
$('#show').mousedown(function () {
flge = true
$('#box').mousemove(function (e) {
if(flge){
var moveX = e.pageX - 50;
var moveY = e.pageY - 50;
var maxX = e.pageX;
var maxY = e.pageY;
if (moveX < 0) {
moveX = 0;
}
if (moveY < 0) {
moveY = 0;
}
if (moveX > 400) {
moveX = 400;
}
if (moveY > 400) {
moveY = 400;
}
$('#show').css('left', moveX)
$('#show').css('top', moveY)
$('#image img').css('left',(-moveX)*2)
$('#image img').css('top',(-moveY)*2)
}
})
})
$('#show').mouseup(function () {
flge = false
})
</script>
</body>
</html>
