1. html :
<!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>图片放大器</title>
</head>
<body>
<div class="sample">
<!-- 左边图 搜索的位置图 -->
<div class="box">
<img class="imgLeft" src="./img/max_01.jpg">
<samp class="mask"></samp>
</div>
<!-- 大图 原始图 -->
<div class="imgA">
<img class="imgsAl" src="./img/big_01.jpg">
</div>
<!-- 选择图 -->
<ul class="imgSo">
<li style="border: 1px solid aqua;"><img src="./img/1 (1).jpg"></li>
<li><img src="./img/1 (2).jpg"></li>
<li><img src="./img/1 (3).jpg"></li>
<li><img src="./img/1 (4).jpg"></li>
<li><img src="./img/1 (5).jpg"></li>
</ul>
</div>
<!-- <button class="btu">点击查看</button> -->
</body>
</html>
2. css:
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.sample{ /* 大盒子div */
width: 600px;
position: relative;
top: 30px;
left: 120px;
/* overflow: hidden; */
}
.sample .box{ /* 第一个div */
position: relative;
width: 100%;
height: 600px;
border: 2px solid aqua;
}
.sample .box .imgLeft{
width: 100%;
height: 100%;
}
.sample .box .mask{
width: 150px;
height: 150px;
background: rgba(0, 217, 255, 0.409);
position: absolute;
top: 0;
left: 0;
cursor: crosshair;
}
.sample .imgSo{
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.sample .imgSo>li{
width: 55px;
height: 55px;
margin: 0 10px;
box-sizing: border-box;
}
.sample .imgSo>li>img{
width: 100%;
height: 100%;
cursor: pointer;
}
.sample .imgA{
width: 850px;
height: 850px;
border: 1px solid red;
position: absolute;
left: 650px;
top: 0;
cursor: pointer;
overflow: hidden;
display: none;
}
.sample .imgA .imgsAl{
right: 0;
top: 0;
position: absolute;
}
3. 原生js:
// 1. 获取元素
let sample = $('.sample'); // 大盒子
let box = $('.box'); // 第一个小盒子
let imgLeft = $('.box img'); // 第一个小盒子的图片
let mask = $('.mask'); // 十字光标
let imgA = $('.imgA'); // 原始图 的盒子
let imgsAl = $('.imgA img'); // 原始图
let imgAll = all_$('.imgSo li') // 可选择的小图片
// console.log(imgsoAll[1]);
// 鼠标事件
box.addEventListener('mouseover',function(){
//1. 鼠标移入后展示的效果
mask.style.display = 'block';
imgA.style.display = 'block';
//2. 滑块跟随
box.addEventListener('mousemove',function(e){
// 2.1 计算偏移量 计算的是 X Y
// 也就是距离顶部 和 左边多少的距离
// 0.5 是滑块的一半
let x = e.pageX - sample.offsetLeft - mask.offsetWidth * 0.5;
let y = e.pageY - sample.offsetTop - mask.offsetHeight *0.5;
// 2.1.1 限制滑块的移动范围
if(x<0){
x = 0;
}else if(x>box.offsetWidth - mask.offsetWidth){
x = box.offsetWidth - mask.offsetWidth -2;
}
if(y<0){
y = 0;
}else if(y>box.offsetHeight - mask.offsetHeight){
y = box.offsetHeight - mask.offsetHeight -2;
}
// 2.2 让 mask 动起来
mask.style.left = x + 'px';
mask.style.top = y + 'px';
// 2.3 大图动起来
imgsAl.style.left = -x/(box.offsetWidth/imgA.offsetWidth)+ 'px';
imgsAl.style.top = -y/(box.offsetHeight/imgA.offsetHeight) + 'px';
})
})
// 复原
box.addEventListener('mouseout', function () {
//1. 鼠标移出后的展示效果
mask.style.display = 'none';
imgA.style.display = 'none';
})
// 4. tabs 选项设置
for(let i = 0;i< imgAll.length;i++){
imgAll[i].onclick = function(){
for(let j = 0;j< imgAll.length;j++){
imgAll[j].style.border = 'none';
}
this.style.border = '1px solid aqua';
// 给小图片点击功能
imgLeft.setAttribute('src',`./img/max_0${i+1}.jpg`);
imgsAl.setAttribute('src',`./img/big_0${i+1}.jpg`);
// imgLeft.setAttribute('src', `./img/max_0${i + 1}.jpg`);
// imgLeft.setAttribute('src', `./img/max_0${i + 1}.png`);
}
}
// console.log();