<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
position: relative;
}
#imgSmall{
400px;
height: 400px;
position:absolute;
top: 0;
left: 0;
}
#divSmall{
400px;
position: absolute;
top: 0;
left: 0;
height: 400px;
}
#divBig{
400px;
height: 400px;
position: absolute;
left:410px;
top: 0;
overflow: hidden;
opacity:0;
display: none;
}
#glass{
100px;
height: 100px;
background: rgba(0,0,0,.5);
position: absolute;
top:0;
left: 0;
overflow:hidden;
display: none;
opacity: 0;
cursor: pointer;
}
#imgSmall2{
400px;
height: 400px;
position:absolute;
top: 0;
left:0;
}
#imgBig{
1600px;
height: 1600px;
position: absolute;
top: 0;
left: 0;
}
#mask{
400px;
height: 400px;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
}
#show{
400px;
height: 200px;
position: absolute;
top: 400px;
left:0;
}
#show div{
float: left;
20px;
height: 200px;
background: greenyellow;
text-align: center;
line-height: 200px;
font-size: 30px;
color:pink;
}
#show #div2{
360px;
background:yellowgreen;
overflow: hidden;
}
#div2 img{
150px;
height: 150px;
}
#div2 li{
float:left;
list-style: none;
height: 150px;
padding: 0 5px;
cursor: pointer;
}
#div2 ul{
640px;
padding-top:20px;
}
</style>
</head>
<body>
<div id="box">
<div id="divSmall">
<img id="imgSmall" alt="" src="img/img1.png"/>
<div id="mask"></div><!--设置一块幕布把原图遮起来-->
<div id="glass">
<img id="imgSmall2" src="img/img1.png"/>
</div>
</div>
<div id="divBig">
<img id="imgBig" src="img/img1.png" alt="" />
</div>
</div>
<div id="show">
<div id="div1"><</div>
<div id="div2">
<ul id="ul1">
<li><img src="img/img4.png" alt="" /></li>
<li><img src="img/img2.png" alt="" /></li>
<li><img src="img/img3.png" alt="" /></li>
<li><img src="img/img1.png" alt="" /></li>
</ul>
</div>
<div id="div3">></div>
</div>
<script src="startMove.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//当鼠标在小div上移动时
divSmall.onmousemove = (e)=>{
//获取鼠标相对div整体的坐标，因为div定位相对于box定位所以
var [x,y] = [e.clientX - box.offsetLeft,e.clientY - box.offsetTop];
//定义鼠标在glass的中心 ，最大宽度减去元素本身一半。
x-=glass.offsetWidth/2;
y-= glass.offsetHeight/2;
if(x<0){
x=0;//用来判断在原点位置时x轴是否会溢出，这里是左边
}
if(y<0){
y=0;//用来判断在原点位置时y轴是否会溢出，这里是右边
}
var maxX = divSmall.offsetWidth - glass.offsetWidth;
//定义glass在X轴可运动的最大范围
if(x>maxX){
x = maxX; //如果大于，就让它等于
}
var maxY = divSmall.offsetHeight - glass.offsetHeight;
//定义glass在Y轴可运动的最大范围
if(y>maxY){
y = maxY; //如果大于，就让它等于
}
[glass.style.left,glass.style.top] = [x+"px",y+"px"];
//把得到的鼠标移动的值传给glass
[imgBig.style.left,imgBig.style.top] = [-4*x+"px",-4*y+"px"];
//把得到的鼠标移动的值传给imgBig 负数是因为在操作时图片一定是相反的移动，
//4是倍数关系。
[imgSmall2.style.left,imgSmall2.style.top]=[-x+"px",-y+"px"]
//类似于大图一样，移动时他也一定是相反运动
}
divSmall.onmouseout=()=>{
startMove(glass,{"opacity":0},()=>{
glass.style.display = "none";
});
startMove(divBig,{"opacity":0},()=>{
divBig.style.display ="none";
});//先让运动执行完，然后在执行display
}
divSmall.onmouseover=()=>{
startMove(glass,{"opacity":100});
glass.style.display = "block";
startMove(divBig,{"opacity":100});
divBig.style.display ="block";
}
var n=div2.scrollLeft;
var timer ;
div1.onmouseover =()=>{
timer = setInterval(()=>{
n++;
div2.scrollLeft=n++;
if(n>=280){
clearInterval(timer);
}
},10);
}
div1.onmouseout =()=>{
clearInterval(timer);
}
div3.onmouseover =()=>{
timer = setInterval(()=>{
n--;
div2.scrollLeft=n--;
if(n<=0){
clearInterval(timer);
}
},10);
}
div3.onmouseout=()=>{
clearInterval(timer);
}
ul1.onclick =(e)=>{
var e = e.target;
if(e.nodeName=="IMG"){
imgSmall2.src=imgSmall.src=imgBig.src=e.src ;
}
}
</script>
</body>
</html>