基于zepto.js、touch.js开发的图片查看器

　　最近由于公司项目需要图片查看器，网上搜了一圈，感觉资料很少，所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件，实现了左右滑动，双指缩放，双击缩放功能，基本使用还行，但是有时候还是不太顺畅，后续会慢慢完善；写的不好的地方望各位能够给出好的建议，谢谢！

源码地址：https://github.com/GLwen/molong_photoSwipe.git

演示：http://runjs.cn/detail/iceaaogh

css  molong.css

*{padding:0;margin: 0;list-style: none;}
.syswin-swipe-show{display: block;}
.syswin-swipe-hide{display: none;}
/***大图****/
.molong-swiper{  position: fixed;  top:0;  left: 0;  border: 1px solid #777e8c;  overflow: hidden;  z-index: 999;  }
.molong-swiper-item{  float: left;  overflow: scroll;  background: #333333;  text-align: center;  }
.molong-swiper-item .img-div{  background-size: contain;  background-position: center;  background-repeat: no-repeat;  }

.molong-img-list { list-style: none; padding: 0; margin: 0;}
.molong-img-list li { float: left; position: relative;margin-right: 10px;}
.molong-img-list li .img-bg { display: block;  100%; height: 100%;border: none;background-size:cover;background-position: center;background-repeat: no-repeat;}

js molong.js

var molong=molong?molong:{};

molong.photoSwipe=function(options){
    //给大图查看器添加一个独立的容器
    var bigContainerString="<div class="molong-swiper syswin-swipe-hide">"+
        "<ul id="bigImg"></ul>"+
        "</div>";
    $("body").append(bigContainerString);
    var swipeSelf=this;
    var screenHeight=window.innerHeight;
    var screenWidth=window.innerWidth;
    var minImageWidth=screenWidth*0.25;//显示小图的宽高
    var bigIndex=0;         //大图索引
    var bigImgOffset=0;        //大图滑动的位置
    var bigImgLength=0;    //大图数量
    //缩放设置
    var initialScale = 1;   //初始缩放比例
    var currentScale=1;      //当前缩放比例
    var pinchSelf;         //当前缩放比例的对象
    var dragSelf;          //当前拖拽的对象
    //解析参数
    swipeSelf.options=$.extend({
        listContainer:$("ul"),
        swipeRigth:true,
        swipeLeft:true,
        pinch:true
    },options);
    //容器
    swipeSelf.listContainer=options.listContainer; //小图容器

    swipeSelf.swipeContainer=$("#bigImg"); //大图容器
    //阻止touchstart默认事件
    touch.on(this.swipeContainer, 'touchstart', function(ev){
        ev.preventDefault();
    });
    swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.3s");//设置动画事件
    //显示大图
    swipeSelf.showBigImg=function(){
        var imgs=swipeSelf.listContainer.find("li");
        var bigImgsUrl=[];
        var bigImgString="";
        bigImgLength=imgs.length;
        bigImgOffset=-screenWidth*bigIndex;
        for(var i=0;i<bigImgLength;i++){
            var bigImgUrl=$(imgs[i]).attr("big-url");
            bigImgsUrl.push(bigImgUrl);
            bigImgString+='<li class="molong-swiper-item"><div class="img-div" style="background-image: url('+bigImgUrl+')"></div></li>';
        }
        swipeSelf.swipeContainer.html(bigImgString);
        swipeSelf.swipeContainer.height(screenHeight);
        swipeSelf.swipeContainer.width(screenWidth*bigImgLength);
        $(".molong-swiper-item").height(screenHeight);
        $(".molong-swiper-item").width(screenWidth);
        $(".img-div").height(screenHeight);
        $(".img-div").width(screenWidth);
        swipeSelf.swipeContainer.css("-webkit-transform","translate3d("+bigImgOffset+"px,0,0)");
        $(".molong-swiper").show();
        //添加事件监听，监听查看大图
        if(swipeSelf.listenShow){
            swipeSelf.listenShow();
        }
    }
    //隐藏大图
    swipeSelf.hideBigImg=function() {
        $(".molong-swiper").hide();
        swipeSelf.swipeContainer.html("");
        if(swipeSelf.listenHide){
            swipeSelf.listenHide();
        }
    }
    //右滑动
    swipeSelf.swipeRight=function(){
        touch.on(swipeSelf.swipeContainer, 'swiperight',"li", function(ev){
            console.log("swiperight");
            if(swipeSelf.options.swipeRigth){
                //$(".img-div").css("-webkit-transform","translate3d(0px, 0px, 0px)");//元素移动复位
                swipeSelf.dx=0;
                swipeSelf.dy=0;
                console.log("向右滑动.");
                if(pinchSelf){
                    pinchSelf.style.webkitTransform = 'scale(1)';
                    currentScale=1;
                }
                bigImgOffset+=screenWidth;
                bigImgOffset=bigImgOffset>=0?0:bigImgOffset;
                swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.5s");//设置动画事件
                swipeSelf.swipeContainer.css("-webkit-transform","translate3d("+bigImgOffset+"px,0,0)");
            }
        });
    }
    //左滑动
    swipeSelf.swipeLeft=function(){
        touch.on(swipeSelf.swipeContainer, 'swipeleft','li', function(ev){
            console.log("swipeleft");
            if(swipeSelf.options.swipeLeft){
                console.log("向左滑动.");
                // $(".img-div").css("-webkit-transform","translate3d(0px, 0px, 0px)");//元素移动复位
                swipeSelf.dx=0;
                swipeSelf.dy=0;
                if(pinchSelf){
                    pinchSelf.style.webkitTransform = 'scale(1)';
                    currentScale=1;
                }
                bigImgOffset-=screenWidth;
                bigImgOffset=Math.abs(bigImgOffset)>=(screenWidth*bigImgLength)?(-screenWidth*(bigImgLength-1)):bigImgOffset;
                swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.5s");//设置动画事件
                swipeSelf.swipeContainer.css("-webkit-transform","translate3d("+bigImgOffset+"px,0,0)");
            }
        });
    }
    //缩放
    swipeSelf.pinche=function(){
        touch.on(swipeSelf.swipeContainer, 'pinchend',".img-div", function(ev){
            console.log("pinchend");
            if(swipeSelf.options.pinch){
                pinchSelf=this;
                currentScale = ev.scale - 1;
                currentScale = initialScale + currentScale;
                currentScale = currentScale > 2 ? 2 : currentScale;
                currentScale = currentScale < 1 ? 1 : currentScale;
                swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.1s");//设置动画事件
                this.style.webkitTransform = 'scale(' + currentScale + ')';
                console.log("当前缩放比例为:" + currentScale + ".");
            }
        });
    }
    //双击放大缩小
    swipeSelf.doubletap=function(){
        touch.on(swipeSelf.swipeContainer, 'doubletap','.img-div', function(ev){
            //console.log(ev.type);
            pinchSelf=this;
            currentScale=currentScale>1?2:1;
            if(currentScale==1){
                currentScale=2;
                swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.1s");//设置动画事件
                this.style.webkitTransform = 'scale(' + currentScale + ')';
            }else{
                currentScale=1;
                swipeSelf.swipeContainer.css("-webkit-transition","all ease 0.1s");//设置动画事件
                this.style.webkitTransform = 'scale(' + currentScale + ')';
            }
        });
    }
    //拖拽
    swipeSelf.dx=0;
    swipeSelf.dy=0;
    swipeSelf.drag=function(){
        touch.on(swipeSelf.swipeContainer, 'drag','.img-div', function(ev){
            if(currentScale>1){
                console.log("drag");
                dragSelf=this;
                swipeSelf.options.swipeLeft=false;
                swipeSelf.options.swipeRigth=false;
                swipeSelf.dx = swipeSelf.dx || 0;
                swipeSelf.dy = swipeSelf.dy || 0;
                console.log("当前x值为:" + swipeSelf.dx + ", 当前y值为:" + swipeSelf.dy +".");
                var offx = swipeSelf.dx + ev.x + "px";
                var offy = swipeSelf.dy + ev.y + "px";
                this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)"+" scale(" +currentScale +")";
            }
        });
        touch.on(swipeSelf.swipeContainer, 'dragend','.img-div', function(ev){
            console.log("dragend");
            swipeSelf.dx += ev.x;
            swipeSelf.dy += ev.y;
            swipeSelf.options.swipeLeft=true;
            swipeSelf.options.swipeRigth=true;
        });
    }
    //触发,查看大图
    swipeSelf.init=function(){
        //设置小图
        swipeSelf.listContainer.find(".img-bg").width(minImageWidth);
        swipeSelf.listContainer.find(".img-bg").height(minImageWidth);
        //添加绑定查看大图事件
        swipeSelf.listContainer.on("tap","li",function(){
            bigIndex=$(this).index();
            swipeSelf.showBigImg();
        });
        swipeSelf.swipeRight();//右滑动
        swipeSelf.swipeLeft();//左滑动
        swipeSelf.pinche();//缩放
        swipeSelf.drag();//拖拽
        swipeSelf.doubletap();//双击放大缩小
    }
    //事件监听
    swipeSelf.listen=function(type,callback){
        swipeSelf[type]=callback;
    }
}

html  index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片查看器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <link rel="stylesheet" href="css/molong.css">
</head>
<body>
<ul id="imgList" class="molong-img-list">
    <li big-url="imges/1.jpg"><div class='img-bg' style="background-image:url(imges/1.jpg);"></div></li>
    <li big-url="imges/2.jpg"><div class='img-bg' style="background-image:url(imges/2.jpg);"></div></li>
    <li big-url="imges/3.jpg"><div class='img-bg' style="background-image:url(imges/3.jpg);"></div></li>
</ul>
<ul style="position: absolute;top:300px;left:0;z-index: 9999999;">
    <li><input style="height: 40px; 90px;text-align: center;"  type="button" value="addImg" id="addBtn"/></li>
    <li style="margin-top: 30px;"><input style="height: 40px; 90px;text-align: center;" type="button" value="closeImg" id="addClose"/></li>
</ul>
<script src="js/zepto.min.js"></script>
<script src="js/touch.min.js"></script>
<script src="js/molong.js"></script>
<script>
   $(function(){
       //添加大图容器
       var screenHeight=window.innerHeight;
       var screenWidth=window.innerWidth;
       var minImageWidth=screenWidth*0.25;//显示小图的宽高
       var mySwipe=new molong.photoSwipe({listContainer:$("#imgList")});
       mySwipe.init();
       //关闭图片查看器
       $("#addClose").on("tap",function(){
           mySwipe.hideBigImg();
       });
       $("#addBtn").on("click",function(){
           console.log(this);
           var addImg1='<li big-url="imges/4.jpg"><div class="img-bg" style="background-image:url(imges/4.jpg);"></div></li>';
           mySwipe.listContainer.append(addImg1);
           mySwipe.listContainer.find(".img-bg").width(minImageWidth);
           mySwipe.listContainer.find(".img-bg").height(minImageWidth);
       })
       //显示大图监听
       mySwipe.listen("listenShow",function(){
           alert("打开大图");
       });
       //关闭大图监听
       mySwipe.listen("listenHide",function(){
           alert("关闭大图");
       });
   });
</script>
</body>
</html>