当点击页面的图片会显示这个图片的独立页面

首先要引入一个插件，这是

jQuery移动端图片查看插件

根据官网的介绍，这是插件所需要的代码，按我的理解就是当点击之后触发，然后这块代码苏哦出来的效果充满整个屏幕

<div class="pswp photo-full-screen" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- &#32972;&#26223; -->
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
            	<div class="pswp__counter"></div>
                <div class="pswp__button pswp__button--close"></div>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

JS的代码：

//图片全屏放大
	var gallery="";
	$(document).on("click",".img-self-js",function(){
		var self=$(this);
		if(self.parents(".photo-contain-js").find(".img-checkbox-js").css("display")!="none"){
			return;
		}
		var index=self.parents("li").index();
		var $Element=$(".pswp")[0];//被绑的容器对象

		// 创建大图参数数组
		var items = [];
		$(".img-self-js").each(function(){
			var self=$(this);
			var item={
				title:self.attr("data-name"),
		                src: self.parent(".img-parent-js").attr("data-href"),
		                w: self[0].naturalWidth,//图片原始大小,
		                h: self[0].naturalHeight
		        }
			items.push(item);
		})
		var $self=self.offset();//获得当前被点击图片的窗口距离对象//官网用的是getBoundingClientRect(),但如果出现图片比较多需要滚动的时候就会定位错误
		
		// 参数设置
		var options = {
			getThumbBoundsFn:function(){
				return {x:$self.left,y:$self.top,w:self[0].naturalWidth};//动画开始时从对应的图片放大到全屏，返回对应图片相对于窗口的实际坐标和自己的宽度
			},
		    maxSpreadZoom:2.5,//手势放大图片最大倍数
		    allowPanToNext:true,//图片处于放大状态是否允许滑动到下一张
		    getDoubleTapZoom:function(){
		    	return 1;//双击后图片缩放到的倍数//1表示缩放到原始大小
		    },
		    loop:false,//滑动到最后一张是否可以继续循环到第一张
		    history: false,
        	    focus: false,
        	    //closeOnVerticalDrag:false,//垂直拖动图片关闭弹层
        	    spacing:0.03,
	            showAnimationDuration: 430,//显示大图动画时间
	            hideAnimationDuration: 430,//隐藏大图动画时间
	            showHideOpacity:true,//动画时淡出逐渐变透明
		        index: index // 从哪一张图片开始
		};
		
		//创建//PhotoSwipeUI_Default这个全局变量是引用photoswipe-ui-default.js所得到
		gallery = new PhotoSwipe( $Element, PhotoSwipeUI_Default, items, options);
		gallery.init();
		//console.log(gallery);
		
		//动画关闭时缩小到对应的图片
		gallery.listen('close', function() {
			var index=gallery.getCurrentIndex();
			gallery.options.index=index;
			var self=$(".img-self-js")[index];
			var $self=$(self).offset();//官网用的是getBoundingClientRect(),但如果出现图片比较多需要滚动的时候就会定位错误
			gallery.options.getThumbBoundsFn=function(){
				return {x:$self.left,y:$self.top,w:$(self).width()};
			}
		});

下面试效果图

原页面，当我点击原页面的图片时会有这样的效果

页面会进入单独的图片页面，并看我标注的地方会有相应的操作