A large image of the mobile QQ space based on Zepto.js view component Imageview.js

A large image of the mobile QQ space based on Zepto.js view component Imageview.js

Call mode: ImageView (index,imgdata)--index parameter is the index value displayed by default for the picture, type number--imadata parameter is the image URL array, type is array

Introduction of the Zepto.js file before use

Imageview.js specific code is as follows:

/* * ImageView v1.0.0 *--pocket Blue Room network based on the large map of zepto.js view *--Call Method ImageView (Index,imgdada) *--index picture default display index, number--imgdata figure Array * */var imageview= (function (window,$) {var _this=$ ("#slideView"), _imgdata=[],_index=0,_length=0,_start =[],_org=[],_orgtime=null,_lasttapdate=null,_zoom=1,_zoomxy=[0,0],_transx=null,_advancedsupport = False,_ Doubledistorg=1,_doublezoomorg=1,isdoublezoom = false,isslide=true,isdrag=false,timer=null,winw= window.innerwidth,winh=window.innerheight;/** * Event Object */var event={touchstart:function (e) {e.preventDefault ();                if (_advancedsupport && e.touches && e.touches.length >= 2) {var img = getimg ();                $ (IMG). CSS ({"-webkit-transitionduration": "0ms", "transitionduration": "0ms"});                _doublezoomorg = _zoom;                _doubledistorg = Getdist (E.touches[0].pagex, E.touches[0].pagey, E.touches[1].pagex, E.touches[1].pageY);            Isdoublezoom = true; return}e = E.touches ?            E.touches[0]: e;isdoublezoom = False;_start = [E.pagex, E.pagey];            _org = [E.pagex, E.pagey];            _orgtime = Date.now ();            _TRANSX =-_index * WINW; if (_zoom!=1) {_zoomxy = _zoomxy | |                [0, 0];                _orgzoomxy = [_zoomxy[0], _zoomxy[1]];                var img = getimg ();                img&& ($ (IMG). CSS ({"-webkit-transitionduration": "0ms", "transitionduration": "0ms"}); Isdrag = True}else{_this.find (". Pv-inner"). CSS ({"-webkit-transitionduration": "0ms", "Transitiondura            tion ":" 0ms "});  Isslide = True}},touchmove:function (e) {e.preventdefault (); if (_advancedsupport && e.touches && E.touches.length >= 2) {var newdist = getdist (E.touches[0].pagex, E.touches[0].pagey, E.touches[1].pag                EX, E.touches[1].pagey);           _zoom = (newdist/_doubledistorg) * _doublezoomorg var img = getimg ();     $ (IMG). CSS ({"-webkit-transitionduration": "0ms", "transitionduration": "0ms"});                    if (_zoom < 1) {_zoom = 1;                    _zoomxy = [0, 0]; $ (IMG). CSS ({"-webkit-transitionduration": "200ms", "transitionduration": "200ms"})} Els                E if (_zoom >getscale (IMG) * 2) {_zoom = Getscale (IMG) * 2; } $ (IMG). CSS ({"-webkit-transform": "Scale (" + _zoom + ") Translate (" + _zoomxy[0] + "px,                "+ _zoomxy[1] +" px) "," Transform ":" Scale ("+ _zoom +") Translate ("+ _zoomxy[0] +" px, "+ _zoomxy[1] +" px) "}); Return}if (isdoublezoom) {return;} E = e.touches?            E.touches[0]: E;                if (_zoom! = 1) {var deltax = (E.pagex-_start[0])/_zoom;                var DeltaY = (E.pagey-_start[1])/_zoom;                                _start = [E.pagex, E.pagey];           var img = getimg ();     var newwidth = Img.clientwidth *_zoom, newheight = Img.clientheight * _zoom;                var Borderx = (NEWWIDTH-WINW)/2/_zoom, bordery = (Newheight-winh)/2/_zoom;                (Borderx >= 0) && (_zoomxy[0] <-borderx | | _zoomxy[0] > Borderx) && (DeltaX/= 3);                (Bordery > 0) && (_zoomxy[1] <-bordery | | _zoomxy[1] > Bordery) && (DeltaY/= 3);                _zoomxy[0] + = DeltaX;                _ZOOMXY[1] + = DeltaY; (_length = = 1 && newwidth < winw| |                Newwidth < WINW) && (_zoomxy[0] = 0); (_length = = 1 && newheight < winh| |                                Newheight < Winh) && (_zoomxy[1] = 0);  $ (IMG). CSS ({"-webkit-transform": "Scale (" + _zoom + ") Translate (" + _zoomxy[0] + "px," + _zoomxy[1] + "px", "transform": "Scale (" + _zoom + ") Translate (" + _zoomxy[0] + "px," + _zoomxy[1] + "px)"})}else{if (!isslide) return;            var deltax = E.pagex-_start[0];            (_transx > 0 | | _transx <-WINW * (_length-1)) && (DeltaX/= 4);            _TRANSX =-_index * winw + deltax;            _this.find (". Pv-inner"). CSS ({"-webkit-transform": "Translate (" + _TRANSX + "px,0px) Translatez (0)"});            }},touchend:function (e) {if (isdoublezoom) {return; }if (_zoom! = 1) {if (!isdrag) {return;}                var img = getimg ();                var newwidth = Img.clientwidth *_zoom, newheight = Img.clientheight * _zoom;                var Borderx = (NEWWIDTH-WINW)/2/_zoom, bordery = (Newheight-winh)/2/_zoom;                    if (_length > 1 && borderx >= 0) {var updatedelta = 0;                    var switchdelta = WINW/6; if (_zoomxy[0] <-borderx-switchdelta/_zoom && _index < _length-1) {uPdatedelta = 1; }else if (_zoomxy[0] > Borderx + switchdelta/_zoom && _index > 0) {updatedelta = 1                    ;                        } if (Updatedelta! = 0) {scaledown (IMG);                        Changeindex (_index + Updatedelta);                return}} var delta = Date.now ()-_orgtime;                    if (Delta <) {(Delta <=) && (delta = 10);                    var Deltadis = Math.pow (180/delta, 2);                    _zoomxy[0] + = (_zoomxy[0]-_orgzoomxy[0]) * DELTADIS;                    _ZOOMXY[1] + = (_zoomxy[1]-_orgzoomxy[1]) * DELTADIS; $ (IMG). CSS ({"-webkit-transition": "400ms cubic-bezier (0.08,0.65,0.79,1)", "transition": "400ms cubic-bezier ( 0.08,0.65,0.79,1) "}"} else{$ (img). CSS ({"-webkit-transition": "200ms linear", "transition": "200ms LinEar "});                    } if (Borderx >= 0) {if (_zoomxy[0] <-borderx) {                    _zoomxy[0] =-borderx;                    }else if (_zoomxy[0] > Borderx) {_zoomxy[0] = Borderx; }} if (Bordery > 0) {if (_zoomxy[                1] <-bordery) {_zoomxy[1] =-bordery;                }else if (_zoomxy[1] >bordery) {_zoomxy[1] = Bordery; }} if (Math.Abs (_zoomxy[0) <) {$ (IMG). CSS ({" -webkit-transform ":" Scale ("+ _zoom +") Translate (0px, "+ _zoomxy[1] +" px) "," Transform ":" Scale ("+ _zoom +") Translat                    E (0px, "+ _zoomxy[1] +" px) "}); return} else{$ (img). CSS ({"-webkit-transform": "Scale (" + _zoom + ") Translate (" + _zoomxy[ 0] + "px," + _zooMXY[1] + "px", "transform": "Scale (" + _zoom + ") Translate (" + _zoomxy[0] + "px," + _zoomxy[1] + "px)"});               } Isdrag = False}else{if (!isslide) {return;}            var deltax = _transx--_index * Winw;var updatedelta = 0;            if (DeltaX >) {updatedelta =-1;            }else if (DeltaX < -50) {Updatedelta = 1;            } _index=_index+updatedelta;            Changeindex (_index); Isslide =false}},click:function (e) {_zoom=1;_zoomxy=[0,0];_this.css ("opacity", "0"); Timer=settimeout (function () {_ This.css ({"Display": "}"). html (""); Unbind ();},150)},dobeltap:function (e) {cleartimeout (timer); var now = new Date            ;            if (now-_lasttapdate <) {return;            } _lasttapdate = Now;            var img = getimg ();            if (!img) {return;            } if (_zoom! = 1) {Scaledown (IMG); }else{Scaleup (img); }},setview:function (e) {winw=window.innerwidth;winh=window.innerheight;_this.width (window.innerWidth). Height ( Window.innerheight); Translate ((-_index*window.innerwidth), 0,0,$ (". Pv-inner") [0]); Scaledown (Getimg ())}};var Handleevent=function (e) {switch (e.type) {case "Touchstart": Event.touchstart (e); Break;case "Touchmove": Event.touchmove (e); Break;case "Touchcancel": Case "Touchend": Event.touchend (e); Break;case "Orientationchange": C                ASE "Resize": Event.setview (e);        break}};/** * Bind event */var bind=function () {_this.on ("Singletap", function (e) {e.preventdefault ();            var now = new Date;                        if (now-_lasttapdate <) {return; } _lasttapdate = Now; Event.click (e); return false;}).            On ("Doubletap", function (e) {e.preventdefault ();            Event.dobeltap (e);        return false;  }); _this.on ("Touchstart touchmove touchend touchcancel", function (e) {          Handleevent (e); }); Event.setview (); " Onorientationchange "in Window? Window.addeventlistener ("Orientationchange", Event.setview,false): Window.addeventlistener ("Resize", Event.setview,false);};/       * * Dismiss event */var unbind= function () {_this.off (); "Onorientationchange" in window? Window.removeeventlistener ("Orientationchange", Event.setview, False): Window.removeeventlistener ("Resize", Event.setview, false)};var getdist= function (x1, y1, x2, y2) {return math.sqrt (Math.pow (x2-x1, 2) + Math.pow (y2-y1 , 2), 2)}/** * Picture scaling */var getscale=function (img) {var h = img.naturalheight, W = img.naturalwidth,scale=w*h/(Img.clienthei ght*img.clientwidth); return scale;};        var scaleup=function (img) {var scale = Getscale (IMG); if (Scale > 1) $ (IMG). css ({'-webkit-transform ': ' scale (' + scale + ') ', ' transform ': ' scale (' + scale + ') ', '        -webkit-transition ":" 200ms "," transition ":" 200ms "});    _zoom = scale;}; var scaledown=functioN (img) {_zoom = 1;        _zoomxy = [0, 0];        _doubledistorg = 1;        _doublezoomorg = 1; $ (IMG). CSS ({"-webkit-transform": "Scale (1)", "Transform": "Scale (1)", "-webkit-transition": "200ms", "transition": " 200ms "});};/ * * Sliding effect * dist */var translate = function (Distx,disty,speed,ele) {if (!! ele) {Ele=ele.style;} else{return;} Ele.webkittransitionduration = Ele. Moztransitionduration = Ele.mstransitionduration = Ele. Otransitionduration = Ele.transitionduration = speed + ' ms '; ele.webkittransform = ' translate (' + distx + ' px, ' +disty+ ' px) ' + ' Translatez (0) '; ele.mstransform = Ele. Moztransform = Ele. Otransform = ' TranslateX (' + distx + ' px) translatey (' + disty + ' px) ';};/ * * Change index value _index */var changeindex=function (index,force) {if (Index < 0) {index = 0;} else if (index >= _length) {index =_length-1;} _index = Index;translate ((-_index*window.innerwidth), 0,force? "0": "$", $ (". Pv-inner") [0]); $ ("#J_index"). HTML (_index+1+ "/" +_length); Imgload ();} /** * Picture gets */var gEtimg=function (index) {var img = _this.find ("li"). EQ (Index | | _index). FIND ("img");        if (img.size () = = 1) {return img[0]; }else{return null}}/** * Picture loaded */var imgload=function () {if (". pv-img"). EQ (_index). FIND ("img") [0]) {$ ("#J_load ing "). CSS (" Display "," "); return;} else{$ ("#J_loading"). CSS ("Display", "block"), var tempimg=new Image (), w,h,set;tempimg.src=_imgdata[_index];$ (". Pv-img "). EQ (_index) [0].appendchild (TEMPIMG); Tempimg.onload=function () {$ (" #J_loading "). CSS (" Display "," ");}}};/ * * Create large image View Dome structure */var create=function () {_this.append ("<ul class= ' Pv-inner ' ></ul>"). Append ("<p class = ' counts ' ><span class= ' value ' id= ' j_index ' > ' + (_index+1) + '/' +_length+ ' </span></p> '). Append (" <span class= ' ui-loading ' id= ' j_loading ' ><i class= ' t1 ' ></i><i class= ' T2 ' ></i><i class= ' T3 ' ></i></span> ') for (Var i=0;i<_length;i++) {$ (". Pv-inner"). Append ("<li class=" pv-img ' ></li> ')}imgload ();};/ ** * Big picture View initialize */var init=function () {!! _this[0]| | $ ("Body"). Append ("<div class= ' Slide-view ' id= ' Slideview ' ></div>") _this=$ ("#slideView");($.os.iphone || $.os.android && parsefloat ($.os.version) >= 4) && (_advancedsupport = true);} ();/** * Large map view return interface function * ImageView (index,data) * Index Initial index value Nubmer * Data picture Arrays array */var imageview=function (index,data) {_i mgdata=data;_index=index;_length=data.length;//creating DOM structure create ();//dom structure display _this.css ("Display", "block");// Bind event bind ();} return ImageView;}) (Window,zepto);

　　

The CSS code used by Imageview.js is as follows:

/* Big picture view */.slide-view {background: #000;p osition:fixed;width:100%;height:100%;overflow:hidden;top:0;left:0;z-index : 100;opacity:0;display:none;-webkit-animation:fadein. 2s linear forwards;animation:fadein. 2s linear forwards;- webkit-touch-callout:none;-webkit-transform-style:preserve-3d; }.slide-view. Counts {position:absolute;top:5%;left:0;right:0;text-align:center;font-size:0;- webkit-transform-style:preserve-3d; }.slide-view. Counts. value {border-radius:9px;line-height:18px;padding:0 6px;font-size:11px;display:inline-block; Background-color:rgba (102,102,102,.6); color: #f1f1f1;}. Pv-inner {position:relative;z-index: -1;display:-webkit-box;display:box;width:100%;height:100%;- Webkit-transition:all 350ms linear;-webkit-backface-visibility:hidden;transition:all 350ms linear; backface-visibility:hidden;-webkit-touch-callout:none;-webkit-transform-style:preserve-3d; }.pv-inner li {text-align:center;display:-webkit-box;display:box;-webkit-box-align:center;overflow:hidden;width:100%;height:100%;-webkit-touch-callout:none;backface-visibility:hidden;- webkit-transform-style:preserve-3d; }.pv-inner img {max-width:97%;max-height:100%;-webkit-transform:scale (1) translate (0px,0px); Transform:scale (1) Translate (0px,0px); visibility:visible;-webkit-transition:200ms;transition:200ms;-webkit-user-select:none; User-select:none;display:block;margin:0 auto;backface-visibility:hidden;-webkit-transform-style:preserve-3d; }@-webkit-keyframes fadein{0%{opacity:0;} 100%{opacity:1;}} @keyframes fadein{0%{opacity:0;} 100%{opacity:100%;}} /*--------------------loading-----------------------*/.ui-loading {position:absolute;left:50%;top:50%;d isplay: none;vertical-align:middle;font:0/0 Arial;margin: -5px 0 0-10px;}. Ui-loading I {display:inline-block;width:5px;height:12px;background: #fff; vertical-align:top;-webkit-animation: loading-spin 1s infinite linear;animation:loading-spin 1s infinite linear;}. ui-loading I {-WEBKIT-ANIMATION:LOADING-SPin 1s infinite linear;animation:loading-spin 1s infinite linear}.ui-loading i.t2 {margin:0 3px;-webkit-animation-name:l Oading-spin-one;animation-name:loading-spin-one}.ui-loading I.t3 {-webkit-animation-name:loading-spin-two; Animation-name:loading-spin-two}@-webkit-keyframes Loading-spin {0% {opacity:0} 30% {Opacity:1;-webkit-transform : Scale (1,1.2)} 60% {Opacity:0;-webkit-transform:scale (1)} 100% {Opacity:0}}@-webkit-keyframes Loading-spin-one { 0% {opacity:0} 20% {opacity:0} 50% {Opacity:1;-webkit-transform:scale (1,1.2)} 80% {OPACITY:0;-WEBKIT-TRANSFO Rm:scale (1)} 100% {opacity:0}}@-webkit-keyframes loading-spin-two {0% {opacity:0} 40% {opacity:0} 70% {op  Acity:1;-webkit-transform:scale (1,1.2)} 100% {Opacity:0;-webkit-transform:scale (1)}} @keyframes Loading-spin {0% {opacity:0} 30% {Opacity:1;transform:scale (1,1.2)} 60% {Opacity:0;transform:scale (1)} 100% {opacity:0}} @ke Yframes Loading-spin-one {0% {OPACity:0} 20% {opacity:0} 50% {Opacity:1;transform:scale (1,1.2)} 80% {Opacity:0;transform:scale (1)} 100% {O pacity:0}} @keyframes loading-spin-two {0% {opacity:0} 40% {opacity:0} 70% {Opacity:1;transform:scale (1,1.2) } 100% {Opacity:0;transform:scale (1)}}/*--------------------loading-end----------------------*/

　　

PS: The code function is relatively simple, there may be many problems. But I can barely use it.

The following is an example of using imageview.js:

<! DOCTYPE html>
　　
A large image of the mobile QQ space based on Zepto.js view component Imageview.js