php 放大镜,原生js实现放大镜

*{

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';

}