最近由于公司项目需要图片查看器，网上搜了一圈，感觉资料很少，所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件，实现了左右滑动，双指缩放，双击缩放功能，基本使用还行，但是有时候还是不太顺畅，后续会慢慢完善；写的不好的地方望各位能够给出好的建议，谢谢！
源码地址：https://github.com/GLwen/molong_photoSwipe.git
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;}
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><div></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; } }
index.html