<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#minbox{
width:500px;
height:500px;
position:relative;
}
#minbox #mask{
width:250px;
height:250px;
position:absolute;
left:0;
top:0;
opacity:0.5;/*透明度*/
filter:alpha(opacity=50);
background:#000;
display:none;
}
#minbox img{
width:500px;
height:500px;
}
#maxbox{
width:500px;
height:500px;
overflow:hidden;
position:absolute;
left:520px;
top:0;
display:none;
}
#maxbox img{
width:1000px;
height:1000px;
}
#list{
overflow:hidden;
margin-top:20px;
}
#list li{
float:left;
list-style:none;
margin-left:20px;
}
#list li img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="minbox">
<img src="图片" alt="">
<div id="mask"></div>
</div>
<div id="maxbox">
<img src="图片" alt="">
</div>
<ul id="list">
<li><img src="图片" alt=""></li>
<li><img src="图片" alt=""></li>
<li><img src="图片" alt=""></li>
<li><img src="图片" alt=""></li>
</ul>
<script>
var minbox=document.getElementById('minbox');
var maxbox=document.getElementById('maxbox');
var list=document.getElementById('list');
var lis=list.children;
console.log(minbox.children[0]);
// tab切换
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
for(var j=0;j<lis.length;j++){
if(this==lis[j]){
minbox.children[0].src=lis[j].children[0].src;
maxbox.children[0].src=lis[j].children[0].src;
}
}
}
}
minbox.onmouseover=function(){
mask.style.display="block";
maxbox.style.display="block";
mask.onmousemove=function(ev){
var event=ev||window.event;
// 获取蒙版距离minbox的左侧距离
var moveL=event.clientX-minbox.offsetLeft-mask.offsetWidth/2;
var moveT=event.clientY-minbox.offsetTop-mask.offsetHeight/2;
// 获取最大临界值
var maxWidth=minbox.offsetWidth-mask.offsetWidth;
var maxHeight=minbox.offsetHeight-mask.offsetHeight;
// 判断临界值
if(moveL>=maxWidth){
moveL=maxWidth;
}else if(moveL<=0){
moveL=0;
}
if(moveT>=maxHeight){
moveT=maxHeight;
}else if(moveT<=0){
moveT=0;
}
mask.style.left=moveL+"px";
mask.style.top=moveT+"px";
// 比例
var scale=maxbox.children[0].offsetWidth/minbox.offsetWidth;//2
maxbox.scrollLeft=moveL*scale;
maxbox.scrollTop=moveT*scale;
}
}
minbox.onmouseout=function(){
mask.style.display="none";
maxbox.style.display="none";
}
</script>
</body>
</html>
