京東放大鏡效果

開始以為是很難的事情，結果可以用別的思維去解決的，就顯得很簡單辣其實，比如說，圖片放大，是本來的圖片的大小，然後進行一個移動產生，所以UI很重要，這樣子，js寫起來才輕鬆多一點

主要的js程式碼如下：

function bigImg () {
        
        var $mask = $("#mask");
        var $maskTop = $("#maskTop");
        var $loading = $("#loading");
        var $largeImg = $("#largeImg");
        var $mediumImg = $("#mediumImg");
        //小黃塊的寬高
        var maskWidth = $mask.width();
        var maskHeight = $mask.height();
        //移動區域
        var maskTopWidth = $maskTop.width();
        var maskTopHeight = $maskTop.height();
        
        var $largeImgContainer = $("#largeImgContainer");
        
        
        
        
        $maskTop.hover(function(){
            
            
            $mask.show();
            
            var src = $mediumImg.attr('src').replace('-m.', '-l.')
              $largeImg.attr('src', src)
            $largeImgContainer.show();
            //顯示小黃塊之後，等待載入大圖出來再進行小黃塊的移動
            $largeImg.on('load',function () {
                
                //得到大圖的尺寸
                var largeImgWidth = $largeImg.width();
                var largeImgHeight = $largeImg.height();
                
                //大圖容器的尺寸是大圖的二分之一
                $largeImgContainer.css({
                    width:largeImgWidth/2,
                    height:largeImgHeight/2
                })
                
                $largeImg.show();
                $loading.hide();
                
                
                $maskTop.mousemove(function(event){
                event = event || window.event
                var eventLeft = event.offsetX;
                var eventTop = event.offsetY;
                
                //定位把小黃塊中心點到當前滑鼠的位置，從而實現移動
                var left = eventLeft - maskWidth/2;
                var top = eventTop - maskHeight/2;
                
                if(left<0 ){
                    left = 0;
                }else if(left > maskTopWidth-maskWidth){
                    left = maskTopWidth-maskWidth;
                }
                
                if(top<0){
                    top = 0;
                }else if (top>maskTopHeight-maskHeight) {
                    top = maskTopHeight - maskHeight;
                }
                
                //設定小黃塊的位置
                $mask.css({
                    left:left,
                    top:top
                })
                
                left = -left *  largeImgWidth / maskTopWidth;
                top = -top * largeImgHeight / maskTopHeight;
                $largeImg.css({
                    left:left,
                    top:top
                })
            })
            })
            
            
        },function(){
            $mask.hide();
            $largeImg.hide();
            $largeImgContainer.hide();
        })
        
        
        
        
    }