h5+jq实现图片预览

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caiyongshengCSDN/article/details/79412391

1.html

先自定义属性data-original,包含大图片链接 (H5增加了一个新特性——data-自定义属性)

<img class="supplier-logo preview-mini-pic" 
     data-original="http://img3.iqilu.com/data/attachment/forum/201308/21/192654ai88zf6zaa60zddo.jpg" 
     src="../../resources/img/logo.png">

<!--图片预览组件-->
<div class="preview-picture">
    <div class="close-btn">X</div>
    <div class="pic-content">
        <img class="original-pic" src="">
    </div>
    <div class="pic-layer"></div>    <!--背景-->
</div>

2.css

/*图片预览组件*/
.preview-picture{position:fixed;display:none;top:0;right:0;bottom:0;left:0;height:100%;width:100%;z-index:999;overflow:hidden;}
.preview-picture>.pic-layer{position:fixed;top:0;left:0;bottom:0;right:0;background:#000;filter:alpha(opacity=30);opacity:0.3;-moz-opacity:0.3;opacity:0.3;}
.preview-picture>.close-btn{position:absolute;top:30px;right:30px;font-size:40px;line-height:40px;font-weight:lighter;color:#fff;z-index:999;cursor:pointer;}
.preview-picture>.pic-content{position:relative;width:100%;height:100%;}
.preview-picture>.pic-content>.original-pic{max-width:100%;max-height:100%;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;}
.preview-mini-pic{cursor:pointer;}

3.js

// 图片预览组件
$(document).on('click','.preview-picture>.close-btn',function () {    //关闭大图片
    $(this).attr('src','').parent().hide();
});
$(document).on('click','.preview-mini-pic',function () {   //点击小图片切换到大图
    var originalSrc=$(this).attr('data-original');   //获取节点
    $('.preview-picture>.pic-content>.original-pic').attr('src',originalSrc);  //添加src节点，将上面获取的data-original节点作为src的值
    $('.preview-picture').show();
});