JQuery實現點擊縮略圖查看大圖效果

點擊縮略圖查看大圖效果，這裏存在一個如何獲取圖片真實大小的問題。在手機端頁面，插入的圖片大小都是按照圖片的原始尺寸在展示的，如果圖片太大完全超出手機的屏幕尺寸 ，我們的bootstrap響應式針對圖片的解決方案如下：

.img-responsive{
  display: block;
  max-width: 100%;
  height: auto;
}

手機端真實效果如圖所示，點擊圖片呈現的效果和圖片在頁面上本身呈現的效果大小一樣，那我們的點擊放大圖片效果就沒有任何意義了。

我們想要的是頁面上顯示的是小圖，點擊顯示的是真實圖片的大小

頁面佈局思路：

1 我們要創建一個遮罩層#outdiv

2 裝圖片的容器div。.indiv

3 顯示大圖的img標籤

.result{position: fixed;top:0;left:0;background: rgba(0,0,0,0.5);z-index:1000;width:100%;height:100%;display: none;}  
.imgresult{border:5px solid #fff;}
.indiv{position: absolute;}

<div class="result" id="outdiv">
    <div class="indiv">
        <img class="imgresult" id="bigimg" src="">
    </div>  
</div> 

<div class="ptb10 clearfix">支付截圖：<img src="images/mao.jpg"  class="imgclass img-responsive" style="width:30%;"></div>
<div class="ptb10 clearfix">身份證圖片：<img src="images/example.png" class="imgclass img-responsive" style="width:30%;"></div>   

想實現這種點擊放大效果，我們就要用JS來實現了。具體的JQuery實現思路如下：

1 獲取手機瀏覽器窗口的寬度和高度。winW，winH

2 獲取圖片的真實大小 。imgW，imgH。這裏不能直接去獲取圖片的寬度高度$(".imgclass").width()，$('.imgclass').height()，獲取的不是圖片真實的寬度和高度

1> 需要創建一個img標籤

2> 獲取 要放大圖片的 src地址（imgsrc），讓新創建的img的src地址等於imgsrc

3> 新創建的圖片加載完成後，重新獲取新創建的圖片的大小，此時獲取的圖片寬度和高度 纔是圖片的真實大小

3 比較圖片大小和瀏覽器窗口的大小。如果 圖片的真實寬度大於瀏覽器窗口的寬度（imgW > winW），設置圖片的寬度等於瀏覽器的寬，圖片的高度設置爲auto。如果 圖片的真實寬度小於瀏覽器窗口的寬度（imgW < winW）,圖片就按原尺寸大小展示。

4 讓遮罩層（#oudiv），fadein和fadeout在click事件裏來回切換。

這樣一個點擊圖片實現放大效果就實現了，好開心，我的JS思路已經按步驟表達的很清楚啦，相信大家都能看懂。來直接上代碼！

function showImg(outdiv,indiv,bigimg,thiselement){
    var winW = $(window).width();
    var winH = $(window).height();
    var src = $(thiselement).attr('src');
    $(bigimg).attr("src",src);
    $("<img/>").attr("src",src).load(function(){
        var imgW = this.width; 
        var imgH = this.height;
        var scale= imgW/imgH;
        if( imgW > winW ){
            $(bigimg).css("width","100%").css("height","auto");
            imgH = winW/scale;
            var h=(winH-imgH)/2;            
            $(indiv).css({"left":0,"top":h});
        }else{        
            $(bigimg).css("width",imgW+'px').css("height",imgH+'px');
            var w=(winW-imgW)/2;
            var h=(winH-imgH)/2;      
            $(indiv).css({"left":w,"top":h});
        }
              
        $(outdiv).fadeIn("fast");
        $(outdiv).click(function(){
            $(this).fadeOut("fast");
        });                             
    });
}
$('.imgclass').click(function(){
    var thiselement=$(this);
    showImg("#outdiv",".indiv","#bigimg",thiselement);
});    

但這樣也不是最完美的，如何在手機端雙擊或者觸摸 放大圖片（#bigimg）可以讓圖片實現局部放大效果呢？又有了新的挑戰，加油。待續~~