[toc]   ## 放大鏡原理 我們的mark橫向是box的一半，縱向也是box的一半，那么右側的大圖橫向（縱向）都應該是左側小圖的一倍 ``` body,div,img{ margin:0; padding:0 } img{ display:block; border:none; } #box{ position:absolute; top:20px; left:20px; width:350px; height:350px; box-shadow:3px 3px 10px 0 #111111; } #box img{ width:100%; height:100%; } #mark{ display:none; position:absolute; top:0; left:0; width:175px; height:175px; background:#000; opacity:.5; filter:alpha(opacity=50); cursor:move; border-radius:50%; } #boxRight{ position:absolute; top:20px; left:380px; width:350px; height:350px; overflow:hidden; border-radius:50%; } /* 我們右側圖片的大小是需要嚴格計算的:mark的width是box的width的一半，那么我們的大圖寬度也應該是小圖的2倍 */ #boxRight img{ position:absolute; top:0; left:0; width:200%; height:200%; display:none; } ``` ``` <div id="box"> <img src="img/iphone.jpg"/> <div id="mark"></div> </div> <div id="boxRight"> <img src="img/iphone_big.jpg"/> </div> ``` ``` var box = document.getElementById("box"),mark=document.getELementById("mark"); var boxRight = document.getElementById("boxRight"); //->設置mark這個盒子的位置信息 function setPosition(e){ //->正常情況下我們獲取的top/left var top = e.clientY - box.offsetTop - (mark.offsetHeight/2); var left = e.clientX - box.offsetLeft - (mark.offsetWidth/2 //->需要做邊界判斷 var minL = 0,minT = 0,maxL = box.offsetWidth - mark.offsetWidth,maxT = box.offsetHeight - mark.offsetHeight; if(left<minL){ mark.style.left = minL + 'px'; tempL = minL; }else if(left>maxL){ mark.style.left = maxL + 'px'; tempL = maxL; }else{ mark.style.left = left + 'px'; tempL = left; } if(top<minT){ mark.style.top = minT + 'px'; tempT = minT; }else if(left>maxT){ mark.style.top = maxT + 'px'; tempT = maxT; }else{ mark.style.top = top + 'px'; tempT = top; } //->讓右側的圖片跟著動;左側移動多少，右側的大圖正好移動它的兩倍即可。 var oImg = boxRight.getElementsByTagName("img")[0]; oImg.style.left = -tempL*2 + 'px'; oImg.style.top = -tempT*2 + 'px'; } box.onmouseenter = function(){ e = e||window.event; mark.style.display = "block"; boxRight.style.display = "block"; }; var tempL = 0,tempT = 0; box.onmouseleave = function(e){ e = e || window.event; mark.style.display = "none"; boxRight.style.display = "none"; } ```