JQuery实现点击查看大图

最新推荐文章于 2022-07-08 15:12:22 发布

@SIMIN

最新推荐文章于 2022-07-08 15:12:22 发布

阅读量775

点赞数

分类专栏： js 文章标签： jquery

本文链接：https://blog.csdn.net/SIMIN_1617/article/details/105865602

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

网页中插入的图片大小都是按照图片的原始尺寸在展示的，如果图片太大完全超出手机的屏幕尺寸，需要响应式处理一下图片（将宽设为设备的宽，高度自适应），通常使用img，当图片过小为了不让其被拉伸造成图片失真的情况会设置max-width:100%

这里主要是获取图片的真实大小。imgW，imgH。这里不能直接去获取图片的宽度高度$(".imgBox").width()，$('.imgclass').height()，获取的不是图片真实的宽度和高度，而是：

1，需要创建一个img标签

2，获取要放大图片的 src地址（imgsrc），让新创建的img的src地址等于imgsrc

3，新创建的图片加载完成后，重新获取新创建的图片的大小，此时获取的图片宽度和高度才是图片的真实大小

<style>
  .imgBox{
     max-width: 100%;
     height: auto;
  }
  .result{
     position: fixed;
     top:0;left:0;
     background: rgba(0,0,0,0.8);
     z-index:1000;
     width:100%;
     height:100%;
     display: none;
   }
  .bigImgBox{position: absolute;}
</style>
<div>
   <img src="images/example.png" class="img imgBox">
</div>
<div class="result">
    <div class="bigImgBox">
        <img id="bigimg" src="">
    </div>  
</div>

function showImg(result,bigImgBox,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%',height:'auto'});
          imgH = winW/scale;
          var h=(winH-imgH)/2;
          $(indiv).css({"left":0,"top":h});
       }else{
          $(bigimg).css({width:imgW+'px',height:imgH+'px'});
          var w=(winW-imgW)/2;
          var h=(winH-imgH)/2;
          $(bigImgBox).css({"left":w,"top":h});
       }   
       $(result).fadeIn("fast");
       $(result).click(function(){
           $(this).fadeOut("fast");
       })                            
    })
}
$('.imgBox').click(function(){
    var thiselement=$(this);
    showImg(".result",".bigImgBox","#bigimg",thiselement);
});