基于touch.js手势库+zepto.js插件开发图片查看器滑动、缩放、双击缩放

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

源码地址：

演示：

molong.css

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

molong.js

rush:js;"> var molong=molong?molong:{}; molong.photoswipe=function(options){ //给大图查看器添加一个独立的容器 var bigContainerString="

"+ "

"; $("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=-screenWidthbigIndex;
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+')">

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