我们在网上购买衣物的时候都会看到这么一个效果，把鼠标放在衣服上，右边会出现一个框呈放大的效果。今天就教大家如何实现！

第一步：需要准备一张400×400的原图和一张800×800的放大图，放在两个div框中，并将后者隐藏，并给他的父级设置overflow：hidden；

第二步：在原图上设置一个200×200的小div，设置为半透明、隐藏，鼠标移入的时候将其和放大图的div一起显示出来。

第三步：设置鼠标移动的时候，小div跟着一起移动，并设置范围保证它不会移出去。

第四步：最关键的部分，设置右边的大图随着鼠标在原图上面的移动而移动。详情请看代码。

html部分：

<div id="left">

<img src="img/4.4.jpg" alt=""><!--这是左边的原图-->

<span></span> <!--这是显示放大的部分-->

</div>

<div id="right">

<img src="img/8.8.jpg" alt=""><!--这是放大图-->

</div> 

CSS部分：

#left{

width:400px;

    height:400px;

    border:1px solid #ccc;

    position:absolute;

    left:50px;

    top:50px;

}

#left span{

width:200px;

    height:200px;

    background:blue;

    opacity:0.3;

    position:absolute;

    top:0;

    left:0;

    display:none;

}

#right{

width:400px;

    height:400px;

    overflow:hidden;      /*溢出的部分给它隐藏*/

    position:absolute;

    top:50px;

    left:500px;

    display:none;

}

#right img{

position:absolute;    /*因为放大图要不停移动，所以要加定位*/

    left:0;

    top:0;

}

JS部分：

var oLeft=document.getElementById('left');

var oRight=document.getElementById('right');

var oSpan=document.querySelector('#left span');

var oImg=document.querySelector('#right img');

oLeft.onmouseover=function () {

oSpan.style.display='block';

    oRight.style.display='block';

}

oLeft.onmouseout=function () {

oSpan.style.display='none';

    oRight.style.display='none';

}

oLeft.onmousemove=function (ev) {

var l=ev.clientX-oSpan.offsetWidth/2-oLeft.offsetLeft;

    var t=ev.clientY-oSpan.offsetHeight/2-oLeft.offsetTop;

    if(l<0){

l=0;

    }else if(l>=oLeft.offsetWidth-oSpan.offsetWidth){

l=oLeft.offsetWidth-oSpan.offsetWidth;

    }

if(t<0){

t=0;

    }else if(t>=oLeft.offsetHeight-oSpan.offsetHeight){

t=oLeft.offsetHeight-oSpan.offsetHeight;

    }

oSpan.style.left=l+'px';      

    oSpan.style.top=t+'px';

    oImg.style.left=-oSpan.offsetLeft*(oImg.offsetWidth-oRight.offsetWidth)/(oLeft.offsetWidth-oSpan.offsetWidth)+'px';

    oImg.style.top=-oSpan.offsetTop*(oImg.offsetHeight-oRight.offsetHeight)/(oLeft.offsetHeight-oSpan.offsetHeight)+'px';

}