基于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; width: 100%; height: 100%;border: none;background-size:cover;background-position: center;background-repeat: no-repeat;}

js molong.js

var molong=molong?molong:{};

            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 );
       });
   });
</script>
</body>
</html>