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

源码地址：

演示：

molong.css

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

molong.js

';
}
swipeSelf.swipeContainer.html(bigImgString);
swipeSelf.swipeContainer.height(screenHeight);
swipeSelf.swipeContainer.width(screenWidthbigImgLength);
$(".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)");
$(".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",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",0px)");//元素移动复位
swipeSelf.dx=0;
swipeSelf.dy=0;
if(pinchSelf){
pinchSelf.style.webkitTransform = 'scale(1)';
currentScale=1;
}
bigImgOffset-=screenWidth;
bigImgOffset=Math.abs(bigImgOffset)>=(screenWidthbigImgLength)?(-screenWidth(bigImgLength-1)):bigImgOffset;
swipeSelf.swipeContainer.css("-webkit-transition",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',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',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",function(){
bigIndex=$(this).index();
swipeSelf.showBigImg();
});
swipeSelf.swipeRight();//右滑动
swipeSelf.swipeLeft();//左滑动
swipeSelf.pinche();//缩放
swipeSelf.drag();//拖拽
swipeSelf.doubletap();//双击放大缩小
}
//事件监听
swipeSelf.listen=function(type,callback){
swipeSelf[type]=callback;
}
}