我們?cè)诰W(wǎng)上購(gòu)買衣物的時(shí)候都會(huì)看到這么一個(gè)效果，把鼠標(biāo)放在衣服上，右邊會(huì)出現(xiàn)一個(gè)框呈放大的效果。今天就教大家如何實(shí)現(xiàn)！
第一步：需要準(zhǔn)備一張400×400的原圖和一張800×800的放大圖，放在兩個(gè)div框中，并將后者隱藏，并給他的父級(jí)設(shè)置overflow：hidden；
第二步：在原圖上設(shè)置一個(gè)200×200的小div，設(shè)置為半透明、隱藏，鼠標(biāo)移入的時(shí)候?qū)⑵浜头糯髨D的div一起顯示出來(lái)。
第三步：設(shè)置鼠標(biāo)移動(dòng)的時(shí)候，小div跟著一起移動(dòng)，并設(shè)置范圍保證它不會(huì)移出去。
第四步：最關(guān)鍵的部分，設(shè)置右邊的大圖隨著鼠標(biāo)在原圖上面的移動(dòng)而移動(dòng)。詳情請(qǐng)看代碼。
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;? ? /*因?yàn)榉糯髨D要不停移動(dòng)，所以要加定位*/
? ? 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';
}
