js放大鏡

實現原理：一大一小的圖片分別有個限制寬高容器，小容器中有個遮罩層做為事件的觸發，還有個透動遮罩用來要顯示大圖的坐標寬高,透動遮罩的寬高通過（大圖的圖片與大圖的容器來計算得出）
通過偏移小圖中透動遮罩的坐標的比例來計算出大圖中顯示的比例

代碼

(function(){
    var $=function(id){
        return typeof(id)=="string"?document.getElementById(id):id
    };

    var Main = $("main");
    var Mark = $("mark");               //小圖的容器事件觸發
    var MoveBox = $("move_box");        //鼠標移動遮罩
    var SmallBox = $("small_box");      //小圖的容器
    var BigBox = $("big_box");          //大圖的容器
    var BigBoxImages = BigBox.getElementsByTagName("img")[0];           //移動的大圖
    var TimerLeave = null;
    var disX = 0;                       //大圖拖拽的初始坐標
    var disY = 0;


    Mark.onmouseover = function(){
        if(TimerLeave){
            clearTimeout(TimerLeave);
        }
        MoveBox.style.display = "block";
        BigBox.style.display = "block";
    }
    Mark.onmouseout = function(){
        TimerLeave = setTimeout(function(){             //延遲消失
            MoveBox.style.display = "none";
            BigBox.style.display = "none";
        },1000)
    }

    BigBox.onmouseover = function(){
        if(TimerLeave){
            clearTimeout(TimerLeave);
        }
        MoveBox.style.display = "block";
        BigBox.style.display = "block";
    }
    BigBox.onmouseout = function(){
        TimerLeave = setTimeout(function(){
            MoveBox.style.display = "none";
            BigBox.style.display = "none";
        },1000)
    }

    Mark.onmousemove = function(e){
        var oEvent = e || event;
        var left = oEvent.clientX - Mark.offsetLeft - Main.offsetLeft - MoveBox.offsetWidth/2;      //計算小圖容器里的鼠標坐標(要減去最外層的偏移)
        var top = oEvent.clientY - Mark.offsetTop - Main.offsetTop - MoveBox.offsetHeight/2;        //計算小圖容器里的鼠標坐標(要減去最外層的偏移)

        MoveBox.style.width = Mark.offsetWidth/(BigBoxImages.offsetWidth/BigBox.offsetWidth)+ "px";       //根據（大圖寬高/大圖容器寬高）來計算（移動遮罩在小圖容器的寬度）
        MoveBox.style.height = Mark.offsetHeight/(BigBoxImages.offsetHeight/BigBox.offsetHeight)+ "px";

        var maxWidth = Mark.offsetWidth - MoveBox.offsetWidth;
        var maxHeight = Mark.offsetHeight - MoveBox.offsetHeight;

        left = left < 0 ? 0 : left > maxWidth ? maxWidth : left;            //判斷不讓移動遮罩移動出小圖容器
        top = top < 0 ? 0 : top > maxHeight ? maxHeight : top;
        MoveBox.style.left = left + "px";
        MoveBox.style.top = top + "px";

        var percentX = left/(maxWidth);        //計算比例值 
        var percentY = top/(maxHeight);

        BigBoxImages.style.left = -percentX*(BigBoxImages.offsetWidth - BigBox.offsetWidth) + "px"; //鼠標在小圖容器的坐標/(小圖容器-移動遮罩)得出比例來計算在（大圖中要顯示的位置);
        BigBoxImages.style.top = -percentY*(BigBoxImages.offsetHeight - BigBox.offsetHeight) + "px";

    }

    //拖拽
    BigBoxImages.onmousedown = function(e){
        var oEvent = e || event;
        disX = getPos(oEvent).x - BigBoxImages.offsetLeft;          //先記錄上次大圖的鼠標的位置
        disY = getPos(oEvent).y - BigBoxImages.offsetTop;

        if(BigBoxImages.setCapture){                                //ie低版本事件捕獲兼容
            BigBoxImages.setCapture();
            BigBoxImages.onmousemove = MouseMove;
            BigBoxImages.onmouseup = MouseUp;
        }else{
            document.onmousemove = MouseMove;
            document.onmouseup = MouseUp;
        }

        function MouseMove(e){
            var oEvent = e || event;

            var NewLeft = getPos(oEvent).x - disX;                  //鼠標移動后的坐標
            var NewTop = getPos(oEvent).y - disY;
            var smallPercentX = NewLeft/(BigBoxImages.offsetWidth - BigBox.offsetWidth);            //計算比例值 
            var smallPercentY = NewTop/(BigBoxImages.offsetHeight - BigBox.offsetHeight);
            var MoveLeft = -smallPercentX*(Mark.offsetWidth - MoveBox.offsetWidth);                 //計算出移動遮罩offsetLeft和offsetTop
            var MoveTop = -smallPercentY*(Mark.offsetHeight - MoveBox.offsetHeight);

            MoveLeft = MoveLeft < 0 ? 0 : MoveLeft > Mark.offsetWidth - MoveBox.offsetWidth ? Mark.offsetWidth - MoveBox.offsetWidth : MoveLeft;
            MoveTop = MoveTop < 0 ? 0 : MoveTop > Mark.offsetHeight - MoveBox.offsetHeight ? Mark.offsetHeight - MoveBox.offsetHeight : MoveTop;

            MoveBox.style.left = MoveLeft + "px";   
            MoveBox.style.top = MoveTop + "px";


            BigBoxImages.style.left = NewLeft + "px";
            BigBoxImages.style.top = NewTop + "px";

            //限制移出容器
            if(NewLeft > 0){
               BigBoxImages.style.left = 0 + "px"; 
            }else if(NewLeft < BigBox.offsetWidth - BigBoxImages.offsetWidth){
                BigBoxImages.style.left = BigBox.offsetWidth - BigBoxImages.offsetWidth + "px";
            }

            if(NewTop > 0){
               BigBoxImages.style.top = 0 + "px"; 
            }else if(NewTop < BigBox.offsetHeight - BigBoxImages.offsetHeight){
                BigBoxImages.style.top = BigBox.offsetHeight - BigBoxImages.offsetHeight + "px";
            }
             
        }

        function MouseUp(){
            this.onmousemove = null;
            this.onmouseup = null;
            if( BigBoxImages.setCapture ){
                BigBoxImages.releaseCapture() ;
            }
        }
        return false;
    }

    function getPos(e){
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        return{x:e.clientX + scrollLeft, y:e.clientY +scrollTop}
    }
})()

HTML

<div id="main">
    <div id="mark"></div>
    <div id="move_box"></div>
    <div id="small_box">
        <img src="images/small_map.jpg" alt="" />
    </div>
    <div id="big_box">
        <img src="images/big_map.jpg" alt="" />
    </div>
</div>

CSS

#main{margin:50px;width:400px;height:330x;background-color:red;position:relative;}
#mark{position:absolute;width:400px;height:330px;filter:alpha(opacity=0);opacity:0;background-color:#fff;z-index:8;cursor:move;}
#move_box{display:none;position:absolute;width:100px;height:100px;background:url(images/1.png) repeat;cursor:move;}
#small_box{border:1px solid #ddd;overflow:hidden;}
#big_box{display:none;position:absolute;left:420px;top:0px;width:800px;height:660px;overflow:hidden;border:1px solid #ddd;}
#big_box img{position:absolute;cursor:move;}