<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.left{
border-radius: 3px;
box-shadow: -10px 10px 7px #999;
margin: 20px 400px;
width: 323px;
height: 490px;
border:1px solid #ccc;
}
img{
display: block;
}
ul{
display: flex;
height: 60px;
}
li{
flex: 1;
border:1px solid #ccc;
display: flex;
justify-content: center;
background: #ddd;
opacity: .4;
}
.active{
opacity:1;
background: pink;
}
.container{
position: relative;
}
.right{
box-shadow: 10px 10px 7px #999;
background: url(images/max1.jpg);
border-radius: 3px;
display: none;
position: absolute;
border:1px solid #ccc;
width: 323px;
height: 490px;
}
.move{
cursor: move;
display: none;
position: absolute;
width: 65px;
height: 98px;
background: rgba(134, 238, 130,.5);
}
</style>
<body>
<div class="left">
<div class="container">
<img src="./images/a1.jpg" alt="" class="active">
<div class="move"></div>
</div>
<ul>
<li class="active">
<img src="./images/min1.jpg" alt="">
</li>
<li>
<img src="./images/min2.jpg" alt="">
</li>
<li>
<img src="./images/min3.jpg" alt="">
</li>
</ul>
</div>
<div class="right">
</div>
<script>
window.onload=()=>{
let imgs=document.querySelector('.container img');
let container=document.querySelector('.container');
let left=document.querySelector('.left');
let right=document.querySelector('.right');
let li_=document.querySelectorAll('.left ul li');
let move=document.querySelector('.move');
// 利用js做定位，将right定位于left右边
right.style['left']=left.offsetLeft+left.offsetWidth+5+'px';
right.style['top']=left.offsetTop+'px';
container.addEventListener('mouseenter',()=>{
right.style['display']='block'
move.style['display']='block'
})
container.addEventListener('mouseleave',()=>{
right.style['display']='none'
move.style['display']='none'
})
container.addEventListener('mousemove',e=>{
// 阻止默认行为
e.preventDefault();
let offsetX=e.pageX-left.offsetLeft;
let offsetY=e.pageY-left.offsetTop;
let x=(offsetX/imgs.offsetWidth)*100+'%';
let y=(offsetY/imgs.offsetHeight)*100+'%';
right.style['background-position-x']=x;
right.style['background-position-y']=y;
// move开始移动
// 计算当前鼠标在内部的偏移量
x=offsetX-(move.offsetWidth/2)
y=offsetY-(move.offsetHeight/2)
// 计算鼠标在内部最大偏移量
offsetX=imgs.offsetWidth-move.offsetWidth;
offsetY=imgs.offsetHeight-move.offsetHeight;
if(x<0) x=0;
if(y<0) y=0;
if(x>offsetX) x=offsetX;
if(y>offsetY) y=offsetY;
// 赋值位移量
move.style['left']=x+'px';
move.style['top']=y+'px';
})
// 循环遍历li
for(let i in li_){
li_[i].addEventListener('mousedown',e=>{
// 按下时候先删除类，后再给类于按下的li元素
document.querySelector('.left li.active').classList.remove('active');
li_[i].classList.add('active');
// 引用container中间a系列的图片
let pic=`./images/a${Number(i)+1}.jpg`;
imgs.src=pic;
// 引用right中max系列背景图
pic=`url(images/max${Number(i)+1}.jpg)`
right.style['background']=pic;
})
}
}
</script>
</body>
</html>
写的不好，仅供参考····
网友评论