我们在网上购买衣物的时候都会看到这么一个效果，把鼠标放在衣服上，右边会出现一个框呈放大的效果。今天就教大家如何实现！
第一步：需要准备一张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';
}
