移动端图片查看器

html:

<ul class="clearfix" id="picBox">    <li>        <img src="http://img07.tooopen.com/images/20170412/tooopen_sy_205630266491.jpg">        <i class="closeIco"></i>    </li>    <li class="addBtn" ng-click="clickZipBtn()"></li></ul>

js:

/** * 微信端图片查看器 *//** * 图片查看器 * @param sel 选择器 * @param obj 对象，count：定义是否是添加按钮在li，是就false,getAttr:定义获取图片的资源 * @备注 addBtn是li中添加按钮的class */function wxBigPictureLook(sel,obj){    //绑定事件    $('#'+sel).on('click','li',function(){        //判断添加按钮        if($(this).attr('class')=='addBtn')            return;        var _index=sessionStorage.setItem('look_index',$(this).index()+1);        //获取图片地址        var params={};        params.getAttr='src';        for(key in obj){            params[key]=obj[key];        }        var _url=$(this).children('img').attr(params.getAttr);        //判断是不是有了图片层        if($("#popBigLiPicture").length==0){            //模板            var tpm='<section id="popBigLiPicture"><i class="popBig_closeBtn"></i><div class="popBig_layer"></div><div class="showPic">' +                '<img src=""></div></section>';            //插入模板            $('body').append(tpm);            //绑定关闭按钮            $('.popBig_closeBtn').on('click',function(){                $('#popBigLiPicture').fadeOut();            });            //绑定左右滑动事件            $('#popBigLiPicture').on('touchstart', '.showPic img', function(e) {                var touch = e.originalEvent,                    startX = touch.changedTouches[0].pageX;                $(this).on('touchmove', function(e) {                    e.preventDefault();                    touch = e.originalEvent.touches[0] ||                        e.originalEvent.changedTouches[0];                    if (touch.pageX - startX < -100) {//向左                        console.log('向左');                        //获取总共的li数量                        var _countNumber=$('#'+sel).children('li').length;                        if(!obj.count){                            _countNumber=_countNumber-1;                        }                        //左滑事件                        //判断是不是最后一个                        var _index=Number(sessionStorage.getItem('look_index'));                        if(_index<_countNumber){                            _index=_index+1;                            sessionStorage.setItem('look_index',_index)                            //隐藏显示图片                            $('#popBigLiPicture .showPic img').hide();                            //获取下一个url                            var nextUrl=$('#'+sel).children('li').eq(_index-1).children('img').attr(params.getAttr);                            //加载出来                            $('#popBigLiPicture .showPic img').attr('src',nextUrl);                            setTimeout(function(){                                $('#popBigLiPicture .showPic img').fadeIn();                            },100);                        }                        $(this).off('touchmove');                    } else if (touch.pageX - startX > 100) {//向右                        console.log('向右');                        //左滑事件                        //判断是不是最后一个                        var _index=Number(sessionStorage.getItem('look_index'));                        if(_index!=1){                            _index=_index-1;                            sessionStorage.setItem('look_index',_index)                            //隐藏显示图片                            $('#popBigLiPicture .showPic img').hide();                            //获取下一个url                            var nextUrl=$('#'+sel).children('li').eq(_index-1).children('img').attr(params.getAttr);                            //加载出来                            $('#popBigLiPicture .showPic img').attr('src',nextUrl);                            setTimeout(function(){                                $('#popBigLiPicture .showPic img').fadeIn();                            },100);                        }                        $(this).off('touchmove');                    };                });                // Return false to prevent image                // highlighting on Android                return false;            }).on('touchend', function() {                $(this).off('touchmove');            });            //延长100毫秒出现            setTimeout(function(){                $('#popBigLiPicture').fadeIn();            },100);        }        $('#popBigLiPicture').fadeIn();        $('#popBigLiPicture .showPic img').attr('src',_url);    })}

less:

#popBigLiPicture{  display: none;  .popBig_layer{    width: 100%;    height: 100%;    position: fixed;    left: 0;    top: 0;    filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;    background-color: black;    z-index: 99;  }  .popBig_closeBtn{    width: 30px;    height: 30px;    background: url("../../images/closeBtn.png") center no-repeat;    background-size: 100%;    position: fixed;    right: 0;    top:0;    z-index: 9991;  }  .showPic{    position: fixed;    left: 0;    top: 0;    z-index: 999;    width: 100%;    height: 100%;    img{      width: 100%;      position: absolute;      top: 0;      bottom: 0;      left: 0;      right: 0;      margin: auto;    }  }}