最近由于公司项目需要图片查看器，网上搜了一圈，感觉资料很少，所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件，实现了左右滑动，双指缩放，双击缩放功能，基本使用还行，但是有时候还是不太顺畅，后续会慢慢完善；写的不好的地方望各位能够给出好的建议，谢谢！
源码地址：https://github.com/GLwen/molong_photoSwipe.git
演示：http://runjs.cn/detail/iceaaogh
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 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;}}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;width: 90px;text-align: center;" type="button" value="addImg" id="addBtn"/></li><li style="margin-top: 30px;"><input style="height: 40px;width: 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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
易网时代-编程资源站