移动端图片查看器

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