我們在網(wǎng)上購買衣物的時候都會看到這么一個效果悍募，把鼠標放在衣服上淋肾，右邊會出現(xiàn)一個框呈放大的效果。今天就教大家如何實現(xiàn)瞎疼！
第一步：需要準備一張400×400的原圖和一張800×800的放大圖工窍，放在兩個div框中割卖，并將后者隱藏，并給他的父級設置overflow：hidden患雏；
第二步：在原圖上設置一個200×200的小div鹏溯，設置為半透明、隱藏淹仑，鼠標移入的時候?qū)⑵浜头糯髨D的div一起顯示出來剿涮。
第三步：設置鼠標移動的時候，小div跟著一起移動攻人，并設置范圍保證它不會移出去。
第四步：最關(guān)鍵的部分悬槽，設置右邊的大圖隨著鼠標在原圖上面的移動而移動怀吻。詳情請看代碼。
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';
}
