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）可以让图片实现局部放大效果呢？又有了新的挑战

，加油。待续~~

JQuery实现点击缩略图查看大图效果

猜你喜欢