從小白的開始

 請參考我的上傳的資源：利用js來完成圖片的放大，從小做起，希望能夠和大家一起學習。

（1）、先設定好頁面，定一個最外面的盒子div，盒子裡面放好兩個div,第一個div裡面放多一個div和圖片標籤，另一個div裡面放一個圖片的標籤。設定好樣式

   （2）、position的說明：有幾個值----absolute、relative、static

   （3）、overflow：當元素溢位元素框的時候的處理的情況，其值可以為，hidden、visible、scroll、auto、inherit，hidden-->內容會被修剪，且其餘部分是不可見的；visible--->預設值，內容不會被修剪，會呈現在元素框之外；

   （4）、cursor：設定滑鼠游標的圖形。

（5）獲取最外層的div，且使用children[]方法來獲取最外層div裡面相應的元件，如div、img。

（6）、獲取到裡面的div--->small,給他註冊滑鼠事件onmouseenter，設定style.display的屬性為block。

（7）、當滑鼠離開裡面的盒子時候，註冊滑鼠事件

（8）、當滑鼠在盒子上移動的時候，給註冊滑鼠移動事件onmousemove，獲取滑鼠在盒子上面的座標，var x=e.pageX-box.offsetLeft;    var y=e.pageY-box.offsetTop;  滑鼠在覆蓋層的中點上，x-=mask.offsetWidth/2    y-=mask.offsetHeight/2; 判斷覆蓋層的座標，始終在盒子上。

（9）、獲取覆蓋層移動的最大距離，ar maskX=small.offsetWidth-mask.offsetWidth;   var maskY=small.offsetHeight-mask.offsetHeight; 並且判斷是否超出盒子的範圍。

（10）、顯示對應的大圖片、獲取大圖片最大的移動距離。

（11）var imgMaxX=big.children[0].offsetWidth-big.offsetWidth;

（12）var imgMaxY=big.children[0].offsetHeight-big.offsetHeight;

（13）var bigImgX=x*imgMaxX/maskX;

（14）var bigImgY=y*imgMaxY/maskY;

（15）big.children[0].style.left=-bigImgX+'px';

（16）big.children[0].style.top=-bigImgY+'px';

在瀏覽器上面的效果