<!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>
<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>放大镜</title>
<style>
.box {
width: 1220px;
height: 800px;
margin: 0 auto;
box-shadow: 2px 2px 10px rgb(145, 143, 143);
}
li {
list-style: none;
}
.left {
width: 600px;
height: 600px;
font-size: 0;
position: relative;
margin-bottom: 20px;
}
.left img {
width: 100%;
height: 100%;
}
.small {
display: inline-block;
width: 200px;
height: 200px;
background-color: rgba(0, 246, 297, 0.2);
position: absolute;
top: 0;
left: 0;
display: none;
}
.right {
position: absolute;
top: 0;
left: 620px;
box-shadow: 2px 0 10px rgb(145, 143, 143);
width: 600px;
height: 600px;
background: url("../img/0.jpg") no-repeat;
background-size: 1800px 1800px;
display: none;
}
ul {
padding-left: 0;
margin-top: 0;
font-size: 0;
}
ul li:first-child {
margin-left: 50px;
}
li {
width: 150px;
height: 150px;
float: left;
margin: 0 10px;
}
li img {
width: 100%;
height: 100%;
border-radius: 10px;
}
/* .pic {
border: 3px solid rgb(58, 203, 223);
} */
</style>
</head>
<body>
<div class="box">
<div class="left">
<img src="../img/0.jpg" alt="" />
<span class="small"></span>
<div class="right"></div>
</div>
<ul>
<li class="pic"><img src="../img/0.jpg" alt="" /></li>
<li><img src="../img/2.jpg" alt="" /></li>
<li><img src="../img/576530.jpg" alt="" /></li>
</ul>
</div>
<script>
// 思路：
// 1.当鼠标移入到left上时，small盒子出现，right盒子出现
// 2.当鼠标移出left盒子时，small盒子隐藏，right盒子隐藏
// 3.鼠标在left盒子里移动的时候，small也跟着移动（不能超出left盒子）
// 4.right盒子里的背景图也要跟着left盒子里的small盒子等比例的移动
// 5.点击下面的下图片，small盒子里的图片和right里的图片跟着切换
var left = document.querySelector(".left");
var small = document.querySelector(".small");
var right = document.querySelector(".right");
var pic = document.querySelector(".left img");
var img = document.querySelectorAll("li img");
img[0].style.border = "3px solid red"
left.onmouseenter = function() { // 1
small.style.display = "block";
right.style.display = "block";
};
left.onmouseleave = function() { // 2
small.style.display = "none";
right.style.display = "none";
};
left.onmousemove = function(e) { // 3
// small要想跟着鼠标移动，首先要获取鼠标的位置(获取的是鼠标距离small left为0的位置)，如果想要鼠标在small的正中间就要减去small宽高的各一半
var x = e.pageX - this.getBoundingClientRect().left - 100; //3.1
var y = e.pageY - this.getBoundingClientRect().top - 100; // 3.1
// 这时你会发现small的盒子移动会超出left所在的范围之内，所以这时要判断一下鼠标的位置 //3.2
if(x < 0){ x = 0}; //这里判断的是鼠标在left盒子里移动的最小的位置
if(y < 0){ y = 0};
// 如果要判断 就要先获取它的最大位置和最小位置 3.2
var maxW = left.offsetWidth - small.offsetWidth;
var maxH = left.offsetHeight - small.offsetHeight;
if(x > maxW){x = maxW} //这里判断的是鼠标在left盒子里移动的 最大位置 3.2
if(y > maxH){y = maxH}
small.style.left = x + "px"; // 3.1
small.style.top = y + "px"; // 3.1
// 4. right盒子里的背景图也要跟着left盒子里的small盒子等比例的移动
var bapX = x / maxW * 1200; // 1200: 背景图的大小减去-盒子的大小
var bapY = y / maxH * 1200;
right.style.backgroundPositionX = -bapX + "px";
right.style.backgroundPositionY = -bapY + "px";
};
// 5.点击下面的下图片，small盒子里的图片和right里的图片跟着切换
for(var i = 0; i < img.length; i++){
img[i].onclick = function(){ // 当我ul下面的某一个img被点击时 5.1
pic.src = this.src; // pic 下面的img图片的路径等于 被点击这个图片的路径 5.2
// right.style.backgroundImage = "url(" + this.src +")";
right.style.backgroundImage = `url(${this.src})`; //右边的大图的路径也变成被点击图片的路径 5.3
for(var k = 0; k < img.length; k++){
img[k].style.border = ""; // 其他的没有边框
}
this.style.border = "3px solid red"; //我点击的这个图片的边框变为这个样式 5.4
}
}
</script>
</body>
</html>
