本人前端小白一枚 做了個仿淘寶的圖片放大效果與大家分享一下，還望大神批評

主要思路是 水平放兩個同等大小的div用來分別盛放原圖和放大後的圖片。下圖所示

在img1和img2中放入相同的圖片，div2中使用overflow：hidden屬性使多餘的圖片隱藏達到區域性放大的效果

下面是HTML部分程式碼

<div id="base" style="width: 200px; height: 200px ;position: relative; float:left;">
        <img id="base_img" style="position: absolute; height: inherit;width: inherit;"  src="marta2jpg.jpg"/>
        <span id="ks_span" style="position:absolute;width: 100px;height: 100px;" class="ks_span none"></span>
    </div>
    <div id="show_contain" class="none" style="width: 200px; height: 200px ;position: relative; float:left;overflow: hidden;border: 1px solid #F0F0F0">
        <img id="show" style="position: absolute; height: 400px;width: 400px;"  src="">
    </div>
 

網狀遮罩層的實現：利用 background-repeat: repeat;background-position: 0 0;background-image: url("back2-1.png");

把2畫素*2畫素的圖片重複填充滿span元素 將span元素背景顏色設定透明

網狀層整體樣式

.ks_span{
        background-attachment: scroll;
        background-repeat: repeat;
        cursor: move;
        z-index: 1;
        position: absolute;
        overflow: hidden;
        background-position: 0 0;
        background-color: transparent;
        background-image: url("back2-1.png");
    }
 

在div1中獲取滑鼠位置 根據滑鼠的位置去改變img2 的top和left屬性，使img2根據滑鼠的移動把不同的部分顯

示在div2中。

下面是獲取滑鼠位置的幾種方法：

event物件不說了，主要寫獲取滑鼠位置的方法：

1.event.clientX、event.clientY 獲取滑鼠相對於瀏覽器視窗可視區域（不包括工具欄和滾動條）的橫縱座標。

2.event.pageX、event.pageY 獲取滑鼠相對於文件也就是body的位置 event.pageX = event.clientX+橫向滾動

條距離，event.pageY = event.clientY + 縱向滾動條距離。

3.event.offsetX、event.offsetY 獲取滑鼠相對於事件源元素的橫縱座標。

4.event.screenX、event.screenY 獲取滑鼠相對於螢幕邊緣的橫縱座標。

我使用的是第二種pageX與pageY，

網狀層與滑鼠主要幾個位置圖：

使滑鼠位於span的中心 滑鼠位置與span的left和top都相差50px 所以用滑鼠的座標減去50得到span的top和left的

值但是body有預設的margin值為8px這裡沒有處理，所以要減去58。實現網狀層跟隨滑鼠移動使用onmousemove

事件不停地改變span的top和left值。

接下來根據滑鼠的位置得到img2的top和left值，當滑鼠向下移動img2需要向上移動才能把下面的圖片顯示出來相同

滑鼠向上移動img2需要向下移動，所以img2的top和left值需要是負值。當滑鼠在12線上時span的邊界已經和div1

的邊界相接圖片此時應該顯示到邊界。所以img2的top為0，此時滑鼠y值為58 ，所以img2 top為58-y 然而在34線上

span下邊界與div1相接所以img2的top值應為-200，此時滑鼠y值為158，-200正好等於2*（58 - y），左右也是這樣

分析 所以滑鼠位置與img2top與left 的關係就是116-2*y和116-2*x。

當滑鼠超出1234線的範圍是img2和span都不需要移動了只需要用if條件限制

JavaScript程式碼：

<script>

    var base = document.getElementById("base");
    var show = document.getElementById("show");
    var base_img = document.getElementById("base_img");
    var show_contain = document.getElementById("show_contain");
    var sk_span = document.getElementById("ks_span");

    base.onmousemove = function (event) {

        var x = event.pageX ;
        var y = event.pageY ;
	var draw = base_img.getAttribute("src")
	show.setAttribute("src",draw);

        if (y>=58 && y<=158){
            sk_span.style.top = y-58+"px";
            show.style.top = 116-2*y + "px";
        }
        if (x>=58 && x<=158){
            sk_span.style.left = x-58+"px";
            show.style.left = 116-2*x + "px";
        }

        show_contain.classList.remove("none");
        sk_span.classList.remove("none");

    };

    base.onmouseout = function () {
        show_contain.classList.add("none");
        sk_span.classList.add("none");
		show.setAttribute("src","");
    }

</script>

以下是整體程式碼以及圖片元素的下載地址