原理：左邊陰影在左邊圖片上從左到右移動(dòng)的時(shí)候，右邊大框也在右邊大圖片上從左到右移動(dòng)（盡管在視覺(jué)、原理和代碼上是相反的）；所謂放大，其實(shí)就是一張?jiān)揪秃苄〉膱D對(duì)應(yīng)一張?jiān)揪秃艽蟮膱D。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ 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; } </style></head><body><div id="small" class="small"> <div class="inner"></div></div><div id="big" class="big"> <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/></div><script> var small=document.getElementById('small'); var inner=small.getElementsByTagName('div')[0]; var big=document.getElementById('big'); var img=big.getElementsByTagName('img')[0]; //當(dāng)鼠標(biāo)移入small的時(shí)候，inner和big顯示 small.onmouseover=function(){ big.style.display='block'; inner.style.display='block'; }; //當(dāng)鼠標(biāo)在small移動(dòng)的時(shí)候：1）鼠標(biāo)在inner的中間 2）inner跟隨鼠標(biāo)移動(dòng) small.onmousemove=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'; //當(dāng)inner移動(dòng)的時(shí)候，大圖跟著一起移動(dòng)，并且，大圖和inner移動(dòng)的方向相反； //或者理解為：左邊陰影在圖片上從左到右移動(dòng)的時(shí)候，右邊大框也在大圖片上從左到右移動(dòng)（盡管視覺(jué)上是相反的）。 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'; }; //當(dāng)鼠標(biāo)移出的時(shí)候，inner和big隱藏； small.onmouseout=function(){ big.style.display='none'; inner.style.display='none'; }</script></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
