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(); });