Development of picture Viewer based on Touch.js gesture Library +zepto.js (slide, zoom, double-click Zoom) _javascript Tips

Recently because of the company project needs picture Viewer, online search a lap, feel little information, so decided based on Baidu Touch.js gesture Library + Zepto.js himself wrote a small plug-in, to achieve the right and left sliding, double refers to scaling, double-click the Zoom function, the basic use of the line, but sometimes it is not smooth, the follow-up will slowly improve; write the bad place hope you can give good advice, thank you!

Source Address: Https://github.com/GLwen/molong_photoSwipe.git

Demo: 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; 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) {///Add a separate container to the large view viewer 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;//displays a small graph of the wide-high var bigindex=0;    Large graph index Var bigimgoffset=0;  Large figure sliding position var bigimglength=0;  Large figure number//zoom setting var Initialscale = 1;   Initial scaling Var currentscale=1;     Current zoom ratio var pinchself;     The current scaling object Var dragself;
    The currently dragged object//Parse parameter Swipeself.options=$.extend ({listcontainer:$ ("ul"), Swiperigth:true, Swipeleft:true,
  Pinch:true},options); Container Swipeself.listcontainer=options.listcontainer; Small Figure container swipeself.swipecontainer=$ ("#bigImg"); Large diagram container//block Touchstart default event Touch.on (This.swipecontainer, ' Touchstart ', function (EV) {Ev.preventdefaulT ();
  }); SwipeSelf.swipeContainer.css ("-webkit-transition", "All Ease 0.3s");/Set animation event//Show large figure 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 ();
    Add event Listener, listen to view large image if (swipeself.listenshow) {swipeself.listenshow ();
    }///Hide Large Figure swipeself.hidebigimg=function () {$ (". Molong-swiper"). Hide ();
    SwipeSelf.swipeContainer.html ("");
    if (swipeself.listenhide) {swipeself.listenhide ();
      }//Right sliding 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)");//element Move reset
        swipeself.dx=0;
        swipeself.dy=0;
        Console.log ("Slide right.");
          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");/Set Animation event Swipeself.swipecontainer. CSS ("-webkit-transform", "Translate3d (" +bigimgoffset+ "px,0,0)");
  }
    }); //Left sliding swipeself.swipeleft=function () {Touch.on (Swipeself.swipecontainer, ' swipeleft ', ' Li ', function (EV) {C
      Onsole.log ("Swipeleft");
        if (swipeSelf.options.swipeLeft) {console.log ("slide left.");
        $ (". Img-div"). CSS ("-webkit-transform", "Translate3d (0px, 0px, 0px)");//element mobile reset 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");/Set Animation event SwipeSelf.swipeContainer.css ("-webkit
      -transform "," Translate3d ("+bigimgoffset+" px,0,0));
  }
    }); //Zoom 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");/Set Animation event This.style.webkitTransform = ' Scale ('
        + Currentscale + ') ';
  Console.log ("Current scaling is: + Currentscale +". ");}});
      Double-click to zoom Out 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");/Set Animation event This.style.webkitTransform = ' Scale ('
      + Currentscale + ') '; }else{Currentscale=1; SwipeSelf.swipeContainer.css ("-webkit-transition", "All Ease 0.1s");/Set Animation event This.style.webkitTransform = ' Scale ('
      + Currentscale + ') ';
  }
    });
  }//drag swipeself.dx=0;
  swipeself.dy=0; Swipeself.drag=function () {Touch.on (Swipeself.swipecontainer, ' drag ', '. Img-div ', function (EV) {if (CURRENTSCALE&G
        t;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 ("Current x value is: + SWIPESELF.DX +", the current Y value is: "+ 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;
  });
    //trigger, view large image swipeself.init=function () {//Set small figure SwipeSelf.listContainer.find (". Img-bg"). Width (minimagewidth);
    SwipeSelf.listContainer.find (". Img-bg"). Height (minimagewidth);
      Add binding View Large image event SwipeSelf.listContainer.on ("Tap", "Li", function () {bigindex=$ (this). index ();
    Swipeself.showbigimg ();
    }); Swipeself.swiperight ()//Right slide swipeself.swipeleft ()//Left slide Swipeself.pinche ()//Zoom Swipeself.drag ()//Drag SWI
  Peself.doubletap ()//Double-click Zoom in to zoom out}//Event listener swipeself.listen=function (type,callback) {swipeself[type]=callback;

 }
}

Index.html

<! DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.