基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)