最近由於公司項目需要圖片查看器,網上搜了一圈,感覺資料很少,所以決定基於百度的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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。