圖片放大鏡 類淘寶--實現一個頁面多張圖片都可以進行放大

這兩天從同學那里接手了一個可視化的項目 只剩下少量問題未解決。其中，甲方要求實現一個圖片放大鏡的功能，同學一開始已經做了。但是后期甲方提出放大鏡放的比例有問題，要修改。現在落在我手里了

修改一下吧。按照慣例，先搜索引擎一波。找到一篇文章，鏈接如下http://www.cnblogs.com/liu-wang/p/6125314.html#anchor1。

本文章修改了引用文章中的代碼實現了自己想要的功能，現在將過程展現出來

先理解幾個概念：關於事件的幾個屬性：

event.clientX:響應事件時，鼠標相對於瀏覽器橫向的距離（及從鼠標到瀏覽器左邊的距離）（這里說的是瀏覽器的有效區域）

event.clientY：響應事件時：鼠標相對於瀏覽器縱向的距離（及從鼠標到瀏覽器頂端邊的距離）（這里說的是瀏覽器的有效區域）

event.offsetX: 鼠標響應事件時，鼠標相對於事件源的位置（左上角的坐標）

event.offsetXY 鼠標響應事件時，鼠標相對於事件源的位置（左上角的坐標）

元素的屬性：

element.offsetWidth元素的寬度

element.offsetHeight元素的高度

下面開始定義css：

<style type="text/css">
        .div1 {
            position: absolute;
            left: 1%;
            width: 11%;
            border: 1px solid #ccc;
        }

        .small_pic img {
            width: 95%;
            height: 95%;
        }

        .div1 .small_pic {/*小圖*/
            width: 100%;
            height: 160px;
            background: #eee;
            position: relative;
        }

        .div1 .float_layer {/*浮動層*/
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            background: #fff;
            filter: alpha(opacity:30);
            opacity: 0.3;
            position: absolute;
            top: 0px;
            left: 0px;
            display: none;
        }

        .div1 .mark {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 2;
            left: 0px;
            top: 0px;
            background: red;
            filter: alpha(opacity:0);
            opacity: 0;
        }

        .div1 .big_pic {/*大圖*/
            position: fixed;/*只有設置為fixed時 設置z-index的值才有效果*/
            top: -1px;
            left: 215px;
            width: 500px;
            height: 500px;
            overflow: hidden;
            border: 2px solid #ccc;
            display: none;
            z-index: 100;
        }

            .div1 .big_pic img {
                position: absolute;
                top: 0px;
                left: 0px;
            }
          
    </style>

定義腳本元素

<script type="text/javascript">
        function getByClass(oParent, sClass) {//通過類名獲取class
            var aEle = oParent.getElementsByTagName('*');
            var aTmp = [];
            var i = 0;

            for (i = 0; i < aEle.length; i++) {
                if (aEle[i].className == sClass) {
                    aTmp.push(aEle[i]);
                }
            }

            return aTmp;
        }

        window.onload = function () {
            var oDiv = document.getElementsByClassName('div1');
            var x;
            for (var i = 0; i < oDiv.length; i++) {
               
                var eve = function(x) {
                    var oMark = getByClass(oDiv[x], 'mark')[0];
                    var oFloat = getByClass(oDiv[x], 'float_layer')[0];
                    var oBig = getByClass(oDiv[x], 'big_pic')[0];
                    var oSmall = getByClass(oDiv[x], 'small_pic')[0];
                    var oImg = oBig.getElementsByTagName('img')[0];
                    oMark.onmouseover = function () {
                        oFloat.style.display = 'block';
                        oBig.style.display = 'block';


                    };
                    oMark.onmouseout = function () {
                        oFloat.style.display = 'none';
                        oBig.style.display = 'none';
                    };
                    oMark.onmousemove = function (ev) {
                        var oEvent = ev || event;
                        
                        
                        var l = oEvent.offsetX -oFloat.offsetWidth/2;
                        var t = oEvent.offsetY -oFloat.offsetHeight/2 ;
                        var imgWidth = oSmall.offsetWidth;
                        var imgHeight = oSmall.offsetHeight;
                        //判斷浮動框是否超過圖片邊界
                        if (imgWidth - l < oFloat.offsetWidth) {
                            l = imgWidth - oFloat.offsetWidth;
                        }
                        if (l < 0) {
                            l = 0;
                        }
                        if (imgHeight - t < oFloat.offsetHeight) {
                            t = imgHeight - oFloat.offsetHeight;
                        }
                        if (t < 0) {
                            t = 0;
                        }
                        var bigImgHeight = oEvent.clientY - oEvent.offsetY -150;
                        oBig.style.top = bigImgHeight + "px";


                        oFloat.style.left = l + 'px';
                        oFloat.style.top = t + 'px';
                        var tempX = l / (oMark.offsetWidth - oFloat.offsetWidth);
                        var tempY = t / (oMark.offsetHeight - oFloat.offsetHeight);

                        document.title = tempX;
                        oImg.style.left = -tempX * (oImg.offsetWidth - oBig.offsetWidth) + 'px';
                        oImg.style.top = -tempY * (oImg.offsetHeight - oBig.offsetHeight) + 'px';


                    }
                }(i);//使用函數的閉包來為頁面中的多個圖片批量添加事件響應函數
                

            }
        };

    </script>

多個元素，這里只展示一個，因為在項目中我是使用Razor視圖引擎循環加載多個圖片的

<div class="div1">
    <div class="small_pic">
      <span class="mark"></span>
      <span class="float_layer"></span>
         <img src="@dbll.GetModel(item1.module_id).str_value" alt="放大圖片1">
    </div>
    <div class="big_pic">
      <img src="~/image/@dbll.GetModel(item1.module_id).str_value" alt="放大圖片2">
     </div>
</div>

完成！！