<!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>
/*
* elem: 操作哪一个元素
* json：表示多个属性
* attr: 操作的那个元素的css中的什么属性
* value: 操作的那个元素的css中的那个属性的目标值
* cb：回调函数，前一个运动执行后，这一段代码才被执行
*/
var startMove = (elem, json, cb)=>{
// 每当执行运动函数的时候，都先把上一次的运动结束掉
clearInterval(elem.timer);
// 开启定时器，让elem的attr属性，不断的变化
elem.timer = setInterval( ()=>{
// 循环，把json中的每一个属性，都做处理（让json中的每一个属性，都运动起来）
var flag = true; //是不是所有的属性，都运动到了目标值
for( var attr in json ){
// attr属性的目标值
var value = json[attr];
// 求当前属性值
var v = getComputedStyle(elem)[attr];
if( attr=="opacity" ){
v = Math.round(v*100);
}else{
v = parseInt(v);
}
//console.log(v);
// 求目标值与当前值的间距
var dist = value-v;
// 求步长值（注意：缓冲运动中，步长值是逐渐减小的）
var step = dist/6;
//console.log(step);
// 如果属性逐渐变大的运动，那么step最后几次的值类似 0.1，我们希望把0.1变为1
// 如果属性逐渐变小的运动，那么step最后几次的值类似 -0.1，我们希望把-0.1变为-1
if( step>0 ){
step = Math.ceil(step);
}else{
step = Math.floor(step);
}
// 更新属性值
//console.log(v, step);
if( attr=="opacity" ){
elem.style[attr] = (v+step)/100;
}else{
elem.style[attr] = (v+step)+'px';
}
// 如果到达目标值，运动停止
//if( v==value ){
// clearInterval(elem.timer);
//}
if( v!=value ){// 只要有1个属性，没有到达目标值，就让flag等于false
flag = false;
}
}
// 判断是否所有的属性，都已经到达了目标值
if( flag ){
clearInterval(elem.timer);
if( cb ){ // 如果设置了回调函数，则执行它
cb();
}
}
}, 30 );
}