Anrufmethode: ImageView (Index, IMGData) -Index ist der Indexwert, der vom Standardbild angezeigt wird
Bevor Sie es verwenden, müssen Sie zuerst die Datei Zepto.js importieren
Der spezifische Code von ImageView.js lautet wie folgt:
Die Codekopie lautet wie folgt:
/*
* ImageView v1.0.0
* -BIG -Bild basierend auf Zepto.js
* -Verfeinerung der Methode ImageView (Index, IMGDADA)
* -Index Bild Standardwert Anzeigeindex, Nummer -IMGDATA Bild URL Array, Array
* *//
var ImageView = (Funktion (Fenster, $) {
var _this = $ ("#SlideView"), _ imgdata = [], _ index = 0, _length = 0,,
_start = [], _ org = [], _ orgime = null,
_lasttapdate = null,
_zoom = 1, _zoomxy = [0,0], _ transx = null,
_advancedSupport = false,
_doubledistorg = 1, _doublezoomorg = 1, isoublezoom = false,
isslide = true, isdrag = false, timer = null,
winw = window.innnerwidth, winh = window.innerHeight;
/**
* Ereignisobjektereignis
*/
var event = {
TouchStart: Funktion (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;
Zurückkehren
}
e = e. touches? E. touches [0]: e;
isDoublezoom = false;
_start = [e.Pagex, E.Pagey];
_org = [e.Pagex, e.Pagey];
_orgTime = Datum.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
}anders{
_this.find (".
isslide = true
}
},
TouchMove: Funktion (e) {
E.PreventDefault ();
if (_advancedSupport && e.touches && e.touches.length> = 2) {
var newist = getdist (e.touches [0] .Pagex, e. -touches [0] .Pagey, e. -touches [1] .Pagex, 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-TransformationDuration": "200 ms", "TransitionDuration": "200 ms"})
} else if (_zoom> getScale (img) * 2) {
_zoom = getScale (img) * 2;
}
$ (IMG) .css ({"-webkit-transform": "scale (" + _zoom + ") translate (" + _zoomxy [0] + "px", + _zoomxy [1] + "px)", "Transformation": "scale (" + _zoom + ") translat (" + _zoomxy [0] + "_zoom"). "px)"});
Zurückkehren
}
if (isoublezoom) {
zurückkehren;
}
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] <-belorde || _zoomxy [1]> Bordery) && (Deltay /= 3);
_zoomxy [0] += deltax;
_zoomxy [1] += deltay;
(_length == 1 && newwidth <winw || newwidth <winw) && (_ Zoomxy [0] = 0);
(_Length == 1 && newHeight <winnh || newHeight <winh) && (_ Zoomxy [1] = 0);
$ (IMG) .css ({"-webkit-transform": "scale (" + _zoom + ") übersetzt (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)", "Transformation": "scale (" + _zoom + ") übersetzt (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)"})
}anders{
if (! islide) return;
var deltax = e.Pagex - _Start [0];
(_transx> 0 || _transx <-winw * (_length - 1)) && (Deltax /= 4);
_transX = -_index * WinW + Deltax;
_this.find (".
}
},
Touchend: Funktion (e) {
if (isoublezoom) {
zurückkehren;
}
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 (aktualisiertesTa! = 0) {
Scaledown (IMG);
ÄnderungIndex (_Index + updatedelta);
Zurückkehren
}
}
var delta = date.now () - _orgime;
if (Delta <300) {
(Delta <= 10) && (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-Transformation": "400 ms Cubic-Bezier (0,08,0,65,0,79,1)", "Übergang": "400 ms Cubic-Bezier (0,08,0,65,0,0,79,1)"}))
} anders{
$ (img) .css ({"-webkit-transition": "200 ms linear", "Übergang": "200 ms 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] <-belorder) {
_zoomxy [1] = --zudery;
} else if (_zoomxy [1]> Bordery) {
_zoomxy [1] = bordery;
}
}
if (math.abs (_zoomxy [0]) <10) {
$ (img) .css ({"-webkit-transform": "scale (" + _zoom + ") übersetzt (0px," + _zoomxy [1] + "px)", "Transformation": "scale (" + _zoom + ") übersetzt (0px, + _zoomxy [1] +" PX) "" ")."
Zurückkehren
} anders{
$ (IMG) .css ({"-webkit-transform": "scale (" + _zoom + ") translate (" + _zoomxy [0] + "px", + _zoomxy [1] + "px)", "Transformation": "scale (" + _zoom + ") translat (" + _zoomxy [0] + "_zoom"). "px)"});
}
isdrag = false
}anders{
if (! isslide) {return;}
var deltax = _transx - -_index * winw;
var updatedelta = 0;
if (Deltax> 50) {
updatedelta = -1;
} else if (deltax <-50) {
updatedelta = 1;
}
_index = _index+updatedelta;
ÄnderungIndex (_Index);
isslide = false
}
},
Klicken: Funktion (e) {
_zoom = 1;
_zoomxy = [0,0];
_this.css ("Depazität", "0");
timer = setTimeout (function () {
_this.css ({"display": ""}). html ("");
lösen();
}, 150)
},
Dobeltap: Funktion (e) {
Clearimeout (Timer);
var jetzt = neues Datum;
if (jetzt - _lasttapdate <500) {
zurückkehren;
}
_lasttapdate = jetzt;
var img = getImg ();
if (! img) {
zurückkehren;
}
if (_zoom! = 1) {
Scaledown (IMG);
}anders{
ScaleUp (IMG);
}
},
setView: function (e) {
winw = window.innnerwidth;
winh = window.innerHeight;
_this.width (window.innnerwidth) .height (window.innerHeight);
translate ((-_ index*window.innnerwidth), 0,0, $ (". PV-innerer") [0]);
scaledown (getImg ())
}
};
var handleEvent = function (e) {
Switch (E.Type) {
Fall "Touchstart":
Event.Touchstart (e);
brechen;
Fall "Touchmove":
Event.touchmove (e);
brechen;
Fall "Touchcancel":
Fall "Touchend":
Event.touchend (e);
brechen;
Fall "OrientationChange":
Fall "Größenänderung":
Event.setView (e);
brechen
}
};
/**
* Bindungsereignisse
*/
var bind = function () {
_this.on ("Singletap", Funktion (e) {
E.PreventDefault ();
var jetzt = neues Datum;
if (jetzt - _lasttapdate <500) {
zurückkehren;
}
_lasttapdate = jetzt;
Event.click (e);
false zurückgeben;
}). on ("Doubletap", Funktion (e) {
E.PreventDefault ();
Event.dobeltap (e);
false zurückgeben;
});
_this.on ("TouchStart Touchmove Touchend TouchCancel", Funktion (e) {
HandleEvent (e);
});
Event.setView ();
"OnorientationChange" im Fenster? window.addeventListener ("orientationChange", event.setView, false): window.addeventListener ("Änderung", Ereignis.setView, false);
};
/**
* Veröffentlichungsereignis
*/
var unbind = function () {
_this.off ();
"OnorientationChange" im Fenster? window.removeEventListener ("orientationChange", event.setView, false): window.removeEventListener ("Größe", Event.setView, False)
};
var getdist = function (x1, y1, x2, y2) {
return math.sqrt (math.pow (x2 - x1, 2) + math.pow (y2 - y1, 2), 2)
}
/**
* Bildzoom
*/
var getScale = function (img) {
var h = img.naturalHeight, w = img.naturalwidth,,
Scale = w*h/(img.clientHeight*img.clientwidth);
Rücklaufwaage;
};
var scalup = function (img) {
var scale = getScale (IMG);
if (Skala> 1)
$ (img) .css ({"-webkit-transform": "scale (" + scale + ")", "transform": "scale (" + scale + ")", "-webkit-transition": "200 ms", "Übergang": "200 ms"});
_zoom = scale;
};
var scaledown = function (img) {
_zoom = 1;
_zoomxy = [0, 0];
_doubledistorg = 1;
_doublezoomorg = 1;
$ (IMG) .css ({"-webkit-transform": "Skala (1)", "Transformation": "Skala (1)", "-Webkit-Transformation": "200 ms", "Übergang": "200ms"});
};
/**
* Gleitwirkung
* dist
*/
var translate = function (distx, disty, Geschwindigkeit, 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)';
};
/**
* Ändern Sie den Index value_index
*/
var ChangeIndex = Funktion (Index, Kraft) {
if (index <0) {
Index = 0;
} else if (index> = _length) {
index = _length - 1;
}
_Index = index;
translate ((-_ index*window.innnerwidth), 0, Kraft? "0": "200", $ (". PV-innerer") [0]);
$ ("#J_index"). Html (_index+1+"/"+_ Länge);
imgoad ();
}
/**
* Bildaufnahme
*/
var getImg = function (index) {
var img = _this.find ("li"). EQ (index || _index) .find ("img");
if (img.size () == 1) {
return img [0];
}anders{
Null zurückkehren
}
}
/**
* Bildladung
*/
var imgoad = function () {
if ($ (". PV-IMG"). EQ (_index) .find ("img") [0]) {
$ ("#J_loading"). CSS ("Anzeige", "");
zurückkehren;
}anders{
$ ("#J_loading"). CSS ("Anzeige", "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 ("Anzeige", "");
}
}
};
/**
* Erstellen Sie ein großes Bild, um die Kuppelstruktur anzuzeigen
*/
var create = function () {
_this.Append ("<span class = 'pv-innerer'> </ul>"). append ("<p class = 'counts'> <span class = 'value' id = 'j_index'>"+(_ index+1)+"/"+_ länge+" class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> "))
für (var i = 0; i <_length; i ++) {
$ (". PV-innerer"). append ("<li class = 'pv-iMg'> </li>")
}
imgoad ();
};
/**
* Großes Bild zum Anzeigen der Initialisierung
*/
var init = function () {
!! _ this [0] || $ ("body"). append ("<div class = 'dia-view' id = 'SlideView'> </div>");
_this = $ ("#SlideView");
($ .os.iphone || $ .os.android && parsefloat ($. os.version)> = 4) && (_ AdvancedSupport = true);
} ();
/**
* Zeigen Sie die Funktion der Rückgabeschnittstelle in einem großen Bild an
* ImageView (Index, Daten)
* INDEX INITIAL INDEX -Wert Nubmer
* Datenbildarray Array
*/
var ImageView = Funktion (Index, Daten) {
_Imgdata = Daten;
_Index = index;
_length = data.length;
// Erstellen Sie eine Dom -Struktur
Erstellen();
// Dom -Strukturanzeige
_this.css ("display", "block");
// Bindungsereignis
binden();
}
ImageView zurückgeben;
}) (Fenster, Zepto);
Der von ImageView.js verwendete CSS -Code lautet wie folgt:
Die Codekopie lautet wie folgt:
/*Große Bildansicht*/
.Slide-View {Hintergrund: #000; Position: Fix; Breite: 100%; Höhe: 100%; Überlauf: versteckt; top: 0; Keine; -Webkit-Transform-Stil: Preserve-3d; }
.Slide-view .counts {Position: absolut; oben: 5%; links: 0; rechts: 0; Text-Align: Mitte; Schriftgröße: 0; }
.Slide-view .counts .Value {Border-Radius: 9px; Zeilenhöhe: 18px; Padding: 0 6px; Schriftgröße: 11px; Anzeige: Inline-Block; Hintergrundfarbe: RGBA (102,102,102, .6); Farbe: #f1f1f1;}}
.pv-innerer {Position: relativ; Z-Index: -1; Anzeige: -Webkit-Box; Anzeige: Box; Breite: 100%; Höhe: 100%;-Webkit-Übergang: Alle 350 ms linear; -Webkit-Backface-Sichtweise: Hidden; Keine; -Webkit-Transform-Stil: Preserve-3d; }
.pv-innerer li {text-align: center; Anzeige: -Webkit-Box; Anzeige: Box; -Webkit-Box-Align: Mitte; Überlauf: Hidden; Breite: 100%; Höhe: 100%; }
.pv-innerer img {max-width: 97%; max-hohe: 100%;-webkit-transform: skala (1) translate (0px, 0px); Transabilität: Skala (1) Übersetzer (0px, 0px); Sichtbarkeit: sichtbar; keine; Anzeige: Block; Margin: 0 Auto; Backface-Sichtbarkeit: versteckt; -Webkit-Transform-Stil: Preserve-3d; }
@-webkit-keyframes fadein {
0%{Opazität: 0;}
100%{Opazität: 1;}
}
@keyframes fadein {
0%{Opazität: 0;}
100%{Opazität: 100%;}
}
/*--------------------Laden-----------------------*/
.ui -lading {Position: absolut; links: 50%; oben: 50%; Anzeige: Keine; Vertikal -Align: Mitte; Schrift: 0/0 Arial; Margin: -5px 0 0 -10px;}
.ui-loading i {display: inline-block; width: 5px; Höhe: 12px; Hintergrund: #ffff; vertikal-align: ober;
.ui-loading i {-webkit-Animation: Ladespin 1S Infinite Linear; Animation: Ladespin 1S Infinite Linear}
.ui-loading i.t2 {margin: 0 3px; -Webkit-Animationsname: Ladespin-eins; Animationsname: Ladenspin-eins}
.
@-webkit-keyframes ladenspin {
0% {Opazität: 0}
30% {Opazität: 1; -Webkit-Transformation: Skala (1,1.2)}}
60% {Opazität: 0; -Webkit-Transformation: Skala (1)}
100% {Opazität: 0}
}
@-webkit-keyframes ladenspin-eins {
0% {Opazität: 0}
20% {Opazität: 0}
50% {Opazität: 1; -Webkit-Transform: Skala (1,1.2)}}
80% {Opazität: 0; -Webkit-Transformation: Skala (1)}
100% {Opazität: 0}
}
@-webkit-keyframes ladenspin-zwei {
0% {Opazität: 0}
40% {Opazität: 0}
70% {Deckkraft: 1; -Webkit-Transformation: Skala (1,1,2)}
100% {Opazität: 0; -Webkit-Transformation: Skala (1)}
}
@keyframes ladenspin {
0% {Opazität: 0}
30% {Opazität: 1; Transformation: Skala (1,1,2)}}
60% {Opazität: 0; Transformation: Skala (1)}
100% {Opazität: 0}
}
@Keyframes Loading-Spin-One {
0% {Opazität: 0}
20% {Opazität: 0}
50% {Opazität: 1; Transformation: Skala (1,1,2)}}
80% {Opazität: 0; Transformation: Skala (1)}
100% {Opazität: 0}
}
@keyframes ladenspin-zwei {
0% {Opazität: 0}
40% {Opazität: 0}
70% {Deckkraft: 1; Transformation: Skala (1,1,2)}}
100% {Opazität: 0; Transformation: Skala (1)}
}
/*-------------------- Loading-End ----------------------*////////
PS: Die Codefunktion ist relativ einfach und es kann viele Probleme geben. Aber es kann kaum verwendet werden
Das Folgende ist ein Beispiel für die Verwendung von ImageView.js:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<meta name = "viewPort" content = "width = Gerätebreite, initiale scale = 1,0, minimal scale = 1,0, maximal scale = 1,0, user-scalable = no">
<titels> Mobile große Bildansicht </title>
<script type = "text/javaScript" src = "test_files/zepto.min.js">/script>
<script type = "text/javaScript" src = "test_files/imageView.js">/script>
</head>
<body>
<!-Das obige ist die HTML-Seitenstruktur->
<!-Das Folgende ist ein Beispiel für die Verwendung von ImageView->
<Script>
;(Funktion(){
// Erhalten Sie die Bildelemente in HTML
var aimg = document.querySelectorAll ("img"),
AIMGSRC = [];
// Binden Sie das Klickereignis für das Bild
für (var i = 0, l = aimg.length; i <l; i ++) {
AIMG [i] .Index = i;
AIMG [i] .ClassName+= "conpic";
AIMGSRC.PUSH (AIMG [i] .src);
}
für (var i = 0; i <$ (". conpic"). Länge; i ++) {
if ($ (". conpic") [i] .complete) {
Addtap ($ (". conpic") [i])
}anders{
$ (". conpic") [i] .onload = function () {
addtap (this);
}
}
}
Funktion addtap (obj) {
$ (obj) .on ("tap", function () {
// ImageView aufrufen
ImageView ($ (OBJ) [0] .Index, AIMGSRC);
})
}
}) ();
</script>
</body>
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe es gefällt euch