基于swiper的仿微信图片预览功能代码实现教程

需求：

点击文章中图片会弹出一层，在这层中图片可以缩放（双击缩放，手势缩放，滑动切换图片，swiper可以做到这些功能），类似微信的预览图片功能。

实现：

1、首次点击某张图片，动态加载swiper的js文件，动态插入swiper结构，初始化swiper，并展示被点击的图片。

2、第二次点击或第三次点击之后直接显示被点击的图片。

代码如下：

<!--dom结构，基本适用于富文本-->
<p id="article">
    ...
    <img src=""/>
    ...
</p>


<!--引入jquery-->
<link rel="stylesheet" type="text/css" href="/css/swiper.css"><!--先引入css，试过使用js引入是不行滴-->
<style>
     .swiper-container {position: fixed;top:0;background: #000;width: 100%;height: 100%;} 
</style>

<script type="text/javascript">
var is_load_js = true;var swiper = {};
$("#article img").click(
    function(){
        var img_index = $("#article img").index(this);//点击了第几张图
        //首次点击引入js，向文档添加元素并初始化swiper
        if(is_load_js){
            var swiper_slider = '';
            $.getScript("/js/swiper.js",function(){ //加载swiper.js,成功后，并执行回调函数
               var swiper_container = $('<p class="swiper-container "></p>');
               var swiper_wrapper = $('<p class="swiper-wrapper"></p>');
               var swiper_icon = '<p class="swiper-pagination swiper-pagination-white"></p>';
               $("#article img").each(function(){
                swiper_slider += '<p class="swiper-slide"><p class="swiper-zoom-container"><img src="'+$(this).attr("original")+'"></p></p>';//由于使用了lazyload,真正的src在original里
               });
               var btn = $('<p id="closs-btn" style="padding:10px;background: red;position:absolute;top:10px;right:10px;z-index:9999;color:#fff;text-align: center;line-height:12px;" onClick="$(\'.swiper-container\').hide();">×</p>');//设置关闭按钮，并绑定事件
               swiper_wrapper.append(swiper_slider);
               swiper_container.append(swiper_wrapper);
               swiper_container.append(swiper_icon);
               swiper_container.append(btn);
               $("body").append(swiper_container);
                swiper = new Swiper('.swiper-container', {
                  zoom: true,
                  initialSlide:img_index,//初始显示第几张
                  pagination: {
                    el: '.swiper-pagination',
                  },
                });
            });
            is_load_js = false;//表示已经初始化了swiper
        }else{
            swiper.zoom.out(); //清除上一次放大
            swiper.slideTo(img_index,0.1,false);//点击第几张显示第几张
            $('.swiper-container').show();
        }

    }
);

</script>

效果：

总结：

暂时并不能想微信那样，单击一下就退回原界面。

swiper还是比较强大的，有各种效果，还可以拿来做布局。