放大镜 tab栏切换
效果图
可以选择切换下面小图片
```javascript
<!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>
* {
margin: 0;
padding: 0;
font-size: 0;
}
#box {
position: relative;
}
#view {
width: 640px;
border-radius: 10px;
position: relative;
cursor: crosshair;
}
#view img {
width: 100%;
}
#onpic {
position: absolute;
width: 100px;
height: 100px;
border-radius: 10px;
background-color: lightpink;
left: 0;
top: 0;
}
#suolue {
width: 640px;
}
#suolue img {
width: 128px;
border: 2px solid transparent;
box-sizing: border-box;
}
#bigpic {
width: 600px;
height: 600px;
position: absolute;
top: 0;
left: 650px;
border-radius: 10px;
overflow: hidden;
}
#bigpic img {
width: 3840px;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<div id="view">
<img src="./images/a.jpg" id="smallpic" alt="" />
<!-- 移动镜框 -->
<div id="onpic"></div>
</div>
<!-- 下面的小的缩图 -->
<div id="suolue">
<img src="./images/a.jpg" alt="" />
<img src="./images/c.jpg" alt="" />
<img src="./images/e.jpg" alt="" />
<img src="./images/f.jpg" alt="" />
<img src="./images/g.jpg" alt="" />
</div>
<div id="bigpic">
<img src="./images/a.jpg" id="bigimg" alt="" />
</div>
</div>
</body>
<script>
//鼠标移动事件
view.onmousemove = function (e) {
var x = e.clientX;
var y = e.clientY;
console.log(x,y);
//控制移动范围
if (x < 640 && y < 360) {
if (x > 640 - 50) {
x = 590;
}
if (x < 50) {
x = 50;
}
if (y > 310) {
y = 310;
}
if (y < 50) {
y = 50;
}
console.log(x, y);
onpic.style.top = y - 50 + "px";
onpic.style.left = x - 50 + "px";
//图片比例关系
bigimg.style.top = -y * 6 + 50 * 6 + "px";
bigimg.style.left = -x * 6 + 50 * 6 + "px";
}
};
let imgs = document.querySelectorAll("#suolue img");
let smallImg = document.querySelector("#smallpic");
let bigImg = document.querySelector("#bigimg");
//点击小缩图切换
for (let i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
console.log(imgs[i]);
smallImg.src = this.src;
bigImg.src = this.src;
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.borderColor = "";
}
this.style.borderColor = "lightpink";
};
}
</script>
</html>