<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
350px;
height: 350px;
border: 1px solid #000;
margin: 200px;
position: relative;
}
#big{
400px;
height: 400px;
border: 1px solid #000;
overflow: hidden;
position: absolute;
top:0;
left : 360px;
display: none;
}
#mask{
175.5px;
height: 175.5px;
position: absolute;
left:0;
top: 0;
background: url(images/1m.jpg);
/*opacity: 0.3;*/
display: none;
cursor: move;
}
#small{
350px;
height:50px;
}
#small img{
margin-right:20px;
}
#middle{
position: relative;
}
#bigImg{
position: absolute;
left: 0;
top: 0;
}
#center{
350px;
height: 350px;
position: absolute;
left: 0;
top: 0;
background: #0000FF;
opacity: .3;
}
</style>
<body>
<div id="box" >
<div id="middle"><!--小图区-->
<img src="images/1m.jpg" alt="" id="m"/>
<div id="center"></div>
<div id="mask"></div><!--遮罩层-->
</div>
<div id="small">
<img src="images/1s.jpg" alt="" />
<img src="images/2s.jpg" alt="" />
<img src="images/3s.jpg" alt="" />
<img src="images/4s.jpg" alt="" />
</div>
<div id="big"><!--大图区-->
<img src="images/1b.jpg" alt="" id="bigImg"/>
</div>
</div>
</body>
</html>
<script src="public.js"> </script>
<script type="text/javascript">
var box = $id("box");
var middle = $id("middle");
var big = $id("big");
var mask = $id("mask");
var bigImg = $id("bigImg");
//鼠标移入到middle区域 操作mask和big的显示
middle.onmouseover = function(){
mask.style.display = "block";
big.style.display = "block";
}
//鼠标移入到middle区域 操作mask和big的隐藏
middle.onmouseout = function(){
mask.style.display = "none";
big.style.display = "none";
}
var smallImg = $id("small").children;
for(var i = 0 ; i < smallImg.length;i++){
//smallImg[i].index = (i+1);
smallImg[i].index=i;
console.log(i)
smallImg[i].onclick = function(){
$id("m").src = "images/"+(this.index+1)+"m.jpg"
$id("bigImg").src = "images/"+(this.index+1)+"b.jpg" ;
}
}
//鼠标在小图区移动 操作mask的移动
middle.onmousemove = function(e){
var e = e || event;
var x = e.pageX - box.offsetLeft - mask.offsetWidth/2;
var y = e.pageY - box.offsetTop - mask.offsetHeight/2;
//获取mask的最大的left和top值
var maxL = box.offsetWidth - mask.offsetWidth-2;
var maxT = box.offsetHeight - mask.offsetHeight-2;
//边界处理
x = x < 0 ? 0 : (x > maxL ? maxL : x);
y = y < 0 ? 0 : (y > maxT ? maxT : y);
mask.style.left = x + "px";
mask.style.top = y + "px";
mask.style.background = "url("+$id("m").src+")" ;
mask.style.backgroundPosition = -x + "px -" + y + "px";
var bigImgLeft = x*bigImg.offsetWidth/middle.offsetWidth;
var bigImgTop = y*bigImg.offsetHeight/middle.offsetHeight;
//设置大图的移动
bigImg.style.left = -bigImgLeft + "px";
bigImg.style.top = -bigImgTop + "px";
}
// 800/350 = 400 / 175
</script>