*{
margin:0;
padding:0;
}
.small{
width: 400px;
height: 400px;
position: relative;
background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center;
border: 1px solid #ccc;
}
.small .inner{
width: 100px;
height: 100px;
background: yellow;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
left:0;
top:0;
display: none;
}
.big{
width: 400px;
height: 400px;
position: absolute;
left:410px;
top:0;
overflow: hidden;
border: 1px solid #ccc;
display: none;
}
.big img{
width: 200%;
height: 200%;
position: absolute;
left:0;
top:0;
}
var small=document.getElementById('small');
var inner=small.getElementsByTagName('div')[0];
var big=document.getElementById('big');
var img=big.getElementsByTagName('img')[0];
//当鼠标移入small的时候,inner和big显示
small.οnmοuseοver=function(){
big.style.display='block';
inner.style.display='block';
};
//当鼠标在small移动的时候:1)鼠标在inner的中间 2)inner跟随鼠标移动
small.οnmοusemοve=function(e){
e=e||window.event;
var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
if(left<=0){
left=0;
}else if(left>=this.offsetWidth-inner.offsetWidth){
left=this.offsetWidth-inner.offsetWidth
}
if(top<=0){
top=0;
}else if(top>=this.offsetHeight-inner.offsetHeight){
top=this.offsetHeight-inner.offsetHeight
}
inner.style.left= left+'px';
inner.style.top= top+'px';
//当inner移动的时候,大图跟着一起移动,并且,大图和inner移动的方向相反;
//或者理解为:左边阴影在图片上从左到右移动的时候,右边大框也在大图片上从左到右移动(尽管视觉上是相反的)。
img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
};
//当鼠标移出的时候,inner和big隐藏;
small.οnmοuseοut=function(){
big.style.display='none';
inner.style.display='none';
}