Méthode d'appel: ImageView (index, IMGDATA) - Le paramètre Index est la valeur d'index affichée par l'image par défaut, Type est numéro --imadata Le paramètre est le tableau URL d'image, le type est un tableau
Avant de l'utiliser, vous devez d'abord importer le fichier zepto.js
Le code spécifique de ImageView.js est le suivant:
La copie de code est la suivante:
/ *
* ImageView v1.0.0
* - Big Image basée sur zepto.js
* - Méthode d'appel ImageView (index, imgdada)
* - Index de valeur par défaut de l'image Index, numéro --Imgdata Imure URL Tableau, tableau
* * /
var imageView = (fonction (fenêtre, $) {
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, tempor = null,
winw = window.innerwidth, winh = window.innerheight;
/ **
* Événement de l'objet de l'événement
* /
Var Event = {
Touchstart: fonction (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;
Retour
}
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 = VRAI
}autre{
_This.find (". Pv-inner"). CSS ({"- webkit-transitionduration": "0ms", "transitionduration": "0ms"});
issLide = true
}
},
TouchMove: fonction (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] .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-transitionduration": "200ms", "transitionduration": "200ms"})
} else if (_zoom> getScale (img) * 2) {
_zoom = getScale (img) * 2;
}
$ (img) .css ({"- webkit-transform": "échelle (" + _zoom + ") tradlater (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "transform": "scale (" + _zoomxy + ") translate (" + _zoomxy [0] + "px," + _zoom. "px)"});
Retour
}
if (isdoublezoom) {
retour;
}
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] <-Bortery || _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": "échelle (" + _zoom + ") tradlate (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)", "transform": "scale (" + _zoom + ") tradlate (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)"})
}autre{
if (! IssLide) retour;
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": "tradlate (" + _transx + "px, 0px) tradatez (0)"});
}
},
TouchEnd: fonction (e) {
if (isdoublezoom) {
retour;
}
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] <-BorderDx - 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);
Retour
}
}
var delta = date.now () - _orgtime;
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-transition": "400 ms cubic-bezier (0,08,0,65,0,79,1)", "transition": "400 ms cubic-bezier (0,08,0,65,0.79,1)"})
} autre{
$ (img) .css ({"- webkit-transition": "200ms linéaire", "transition": "200ms linéaire"});
}
if (borderX> = 0) {
if (_zoomxy [0] <-borderx) {
_zoomxy [0] = -BorterDx;
} else if (_zoomxy [0]> borderx) {
_zoomxy [0] = borderx;
}
}
if (bordery> 0) {
if (_zoomxy [1] <-Bortery) {
_zoomxy [1] = -Bortery;
} else if (_zoomxy [1]> bordery) {
_zoomxy [1] = bordery;
}
}
if (math.abs (_zoomxy [0]) <10) {
$ (img) .css ({"- webkit-transform": "scale (" + _zoom + ") tradlate (0px," + _zoomxy [1] + "px)", "transform": "scale (" + _zoom + ") tradlate (0px," + _zoomxy [1] + "px)"});
Retour
} autre{
$ (img) .css ({"- webkit-transform": "échelle (" + _zoom + ") tradlater (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "transform": "scale (" + _zoomxy + ") translate (" + _zoomxy [0] + "px," + _zoom. "px)"});
}
isdrag = faux
}autre{
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;
changeIndex (_index);
issLide = false
}
},
Cliquez sur: fonction (e) {
_zoom = 1;
_zoomxy = [0,0];
_This.css ("opacité", "0");
timer = setTimeout (function () {
_This.css ({"affiche": ""}). html ("");
délier();
}, 150)
},
dabeltap: fonction (e) {
ClearTimeout (temporisateur);
var maintenant = nouvelle date;
if (maintenant - _lastTapdate <500) {
retour;
}
_lastTapdate = maintenant;
var img = getImg ();
if (! img) {
retour;
}
if (_zoom! = 1) {
Scaledown (IMG);
}autre{
SCALEUP (IMG);
}
},
setView: fonction (e) {
winw = window.innerwidth;
winh = window.innerheight;
_This.width (window.innerwidth) .Height (window.innerHeight);
traduire ((-_ index * window.innerwidth), 0,0, $ (". pv-inner") [0]);
Scaledown (getImg ())
}
};
var handleevent = function (e) {
commutateur (e.type) {
case "Touchstart":
Event.touchstart (e);
casser;
case "Touchmove":
Event.touchmove (e);
casser;
cas "TouchCancel":
cas "Touchend":
Event.touchend (e);
casser;
cas "orientationchange":
cas "redimensionner":
Event.setView (e);
casser
}
};
/ **
* Événements de liaison
* /
var bind = function () {
_This.on ("singletap", fonction (e) {
E.PreventDefault ();
var maintenant = nouvelle date;
if (maintenant - _lastTapdate <500) {
retour;
}
_lastTapdate = maintenant;
Event.click (e);
retourne false;
}). sur ("DoubleTap", fonction (e) {
E.PreventDefault ();
Event.dobeltap (e);
retourne false;
});
_This.on ("Touchstart TouchMove Touchend TouchCancel", fonction (e) {
HandleEvent (e);
});
Event.setView ();
"OnientationChange" dans la fenêtre? window.addeventListener ("orientationchange", event.setView, false): window.addeventListener ("redimensit", event.setView, false);
};
/ **
* Événement de sortie
* /
var unstind = function () {
_This.off ();
"OnientationChange" dans la fenêtre? window.reMoveEventListener ("orientationchange", event.setView, false): window.removeEventListener ("redimensit", event.setView, false)
};
var getDist = fonction (x1, y1, x2, y2) {
return math.sqrt (math.pow (x2 - x1, 2) + math.pow (y2 - y1, 2), 2)
}
/ **
* Zoom d'image
* /
var getScale = fonction (img) {
var h = img.naturalheight, w = img.naturalwidth,
Échelle = w * h / (img.clientHeight * img.clientwidth);
échelle de retour;
};
var ScaleUp = fonction (img) {
Var Scale = GetScale (IMG);
si (échelle> 1)
$ (img) .css ({"- webkit-transform": "échelle (" + échelle + ")", "transform": "échelle (" + échelle + ")", "- webkit-transition": "200ms", "transition": "200ms"});
_zoom = échelle;
};
var Scaledown = fonction (img) {
_zoom = 1;
_zoomxy = [0, 0];
_doubledIstorg = 1;
_doublezoomorg = 1;
$ (img) .css ({"- webkit-transform": "échelle (1)", "transform": "échelle (1)", "- webkit-transition": "200ms", "transition": "200ms"});
};
/ **
* Effet coulissant
* Dist
* /
var tradlate = fonction (distx, disty, vitesse, ele) {
if (!! ele) {ele = ele.style; } else {return; }
ele.webkitTransitionDuration = ele.mozTransitionDuration = ele.mstransitionDuration = ele.otransitionDuration = ele.transitionDuration = Speed + 'MS';
ele.webkitTransform = 'tradlate (' + distx + 'px,' + disty + 'px)' + 'tratez (0)';
ele.mstransform = ele.mozTransform = ele.otransform = 'translatex (' + distx + 'px) translatey (' + disty + 'px)';
};
/ **
* Modifier l'index Value_index
* /
var changeIndex = fonction (index, force) {
if (index <0) {
index = 0;
} else if (index> = _length) {
index = _length - 1;
}
_index = index;
traduire ((-_ index * window.innerwidth), 0, force? "0": "200", $ (". pv-inner") [0]);
$ ("# J_index"). Html (_index + 1 + "/" + _ longueur);
imgload ();
}
/ **
* Acquisition d'images
* /
var getImg = fonction (index) {
var img = _this.find ("li"). eq (index || _index) .find ("img");
if (img.size () == 1) {
return img [0];
}autre{
retourner null
}
}
/ **
* Chargement d'image
* /
var imgload = function () {
if ($ (". pv-iMg"). eq (_index) .find ("img") [0]) {
$ ("# J_loking"). Css ("affichage", "");
retour;
}autre{
$ ("# J_loking"). Css ("affichage", "bloc");
var tempimg = new image (), w, h, set;
tempimg.src = _imgdata [_index];
$ (". Pv-IMG"). Eq (_index) [0] .APPENDCHILD (tempiMg);
tempimg.onload = function () {
$ ("# J_loking"). Css ("affichage", "");
}
}
};
/ **
* Créez une grande image pour afficher la structure du dôme
* /
var create = function () {
_This.Apnd ("<span class = 'pv-inner'> </ul>"). APPEND ("<p class = 'count'> <span class = 'value' id = 'j_index'>" + (_ index + 1) + "/" + _ Length + "</ span> </p>"). class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> ")
pour (var i = 0; i <_length; i ++) {
$ (". Pv-inner"). APPEND ("<li class = 'pv-iMg'> </li>")
}
imgload ();
};
/ **
* Grande image pour afficher l'initialisation
* /
var init = function () {
!! _ ce [0] || $ ("body"). APPEND ("<div class = 'Slide-View' id = 'SlideView'> </div>");
_This = $ ("# SlideView");
($ .os.iphone || $ .os.Android && parsefloat ($. OS.version)> = 4) && (_ AdvancedSupport = true);
} ();
/ **
* Afficher la fonction d'interface de retour dans une grande image
* ImageView (index, données)
* index de la valeur d'index initial noubmer
* tableau des données de données
* /
var imageView = fonction (index, data) {
_ImgData = données;
_index = index;
_length = data.length;
// Créer une structure DOM
Créer();
// Affichage de la structure DOM
_This.css ("affichage", "bloc");
// Événement de liaison
lier();
}
return imageView;
}) (fenêtre, zepto);
Le code CSS utilisé par ImageView.js est le suivant:
La copie de code est la suivante:
/ * Grande vue d'image * /
.SLIDE-View {Background: # 000; Position: Fixed; Width: 100%; Height: 100%; Overflow: Hidden; top: 0; Left: 0; Z-index: 100; Opacity: 0; Affichage: Aucun; -webkit-animation: Fadein .2S Linear-Calound: Fadein .2S Linear Forers; -webkit-touch-canal: Aucun; -Webkit-Transform-style: Preserve-3d; }
.SLIDE-View .Counts {Position: Absolute; Top: 5%; gauche: 0; droite: 0; Text-Align: Centre; Font-Size: 0; -Webkit-Transform-Style: Preserve-3d; }
.SLIDE-View .Counts .Value {Border-Radius: 9px; line-height: 18px; padding: 0 6px; Font-Size: 11px; affichage: en ligne de bloc;
.pv-inner {position: relatif; z-index: -1; affichage: -webkit-box; affichage: box; largeur: 100%; hauteur: 100%; - webkit-transition: tous les 350m Aucun; -Webkit-Transform-style: Preserve-3d; }
.pv-inner li {text-align: Center; affichage: -webkit-box; affichage: box; -webkit-box-adign: Centre; overflow: Hidden; width: 100%; hauteur: 100%; - webkit-touch-callout: non; backface-visibilité: Hidden; -webkit-transform-style: preserv-3d; }
.pv-inner img {max-largeth: 97%; max-height: 100%; - webkit-transform: échelle (1) tradlater (0px, 0px); transopabilité: échelle (1) tradlater (0px, 0px); Visibilité: visibilité; -webkit-transition: non: transition: 200m Block; marge: 0 auto; backface-visibilité: Hidden; -webkit-transform-style: Preserve-3d; }
@ -webkit-keyframes fadein {
0% {opacité: 0;}
100% {opacité: 1;}
}
@keyframes fadein {
0% {opacité: 0;}
100% {opacité: 100%;}
}
/*--------------------chargement-----------------------*/
.UI-chargement {position: absolu; gauche: 50%; top: 50%; affichage: aucun; Vertical-Align: Middle; Font: 0/0 Arial; marge: -5px 0 0 -10px;}
.UI-chargement i {affichage: bloc en ligne; largeur: 5px; hauteur: 12px; arrière-plan: #ffff; Vertical-Align: top; -webkit-animation: chargement-spin 1s infinie linéaire; animation: chargement-spin 1s infinite linéaire;}
.UI-chargement i {-webkit-animation: chargement-spin 1s infinie linéaire; animation: chargement-spin 1 infinite linéaire}
.UI-chargement i.t2 {marge: 0 3px; -webkit-animation-name: chargement-spin-one; nom d'animation: chargement-spin-ne}
.UI-chargement i.t3 {-webkit-animation-name: chargement-spin-two; nom d'animation: chargement-spin-two}
@ -webkit-keyframes Loading-Spin {
0% {opacité: 0}
30% {opacité: 1; -webkit-transform: échelle (1,1.2)}
60% {opacité: 0; -webkit-transform: échelle (1)}
100% {opacité: 0}
}
@ -webkit-keyframes Loading-Spin-One {
0% {opacité: 0}
20% {opacité: 0}
50% {opacité: 1; -webkit-transform: échelle (1,1.2)}
80% {opacité: 0; -webkit-transform: échelle (1)}
100% {opacité: 0}
}
@ -webkit-keyframes Loading-Spin-two {
0% {opacité: 0}
40% {opacité: 0}
70% {opacité: 1; -webkit-transform: échelle (1,1.2)}
100% {opacité: 0; -webkit-transform: échelle (1)}
}
@KeyFrames Loading-Spin {
0% {opacité: 0}
30% {opacité: 1; transform: échelle (1,1.2)}
60% {opacité: 0; transform: échelle (1)}
100% {opacité: 0}
}
@KeyFrames Loading-Spin-One {
0% {opacité: 0}
20% {opacité: 0}
50% {opacité: 1; transform: échelle (1,1.2)}
80% {opacité: 0; transform: échelle (1)}
100% {opacité: 0}
}
@KeyFrames Loading-Spin-Two {
0% {opacité: 0}
40% {opacité: 0}
70% {opacité: 1; transform: échelle (1,1.2)}
100% {opacité: 0; transform: échelle (1)}
}
/ * -------------------- Loading-End ---------------------- * /
PS: La fonction de code est relativement simple et il peut y avoir de nombreux problèmes. Mais il peut être utilisé à peine
Ce qui suit est un exemple d'utilisation d'imageView.js:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<meta name = "Viewport" Content = "width = Device-Width, Initial-Scale = 1,0, minimum-échelle = 1,0, maximum-échelle = 1,0, user-échec = no">
<Title> View de grande image mobile </TITAL>
<script type = "text / javascript" src = "test_files / zepto.min.js"> / script>
<script type = "text / javascript" src = "test_files / imageView.js"> / script>
</ head>
<body>
<! - Ce qui précède est la structure de la page HTML ->
<! - Ce qui suit est un exemple d'utilisation de l'image ->>
<cript>
;(fonction(){
// Obtenez les éléments d'image en HTML
var AIMG = document.QuerySelectorall ("img"),
AIMGSRC = [];
// lier l'événement de clic pour l'image
pour (var i = 0, l = AIMG.Length; i <l; i ++) {
AIMG [i] .Index = i;
AIMG [i] .classname + = "conpic";
AIMGSRC.PUSH (AIMG [i] .src);
}
pour (var i = 0; i <$ (". conpic"). longueur; i ++) {
if ($ (". conpic") [i] .complete) {
addtap ($ (". conpic") [i])
}autre{
$ (". conpic") [i] .onload = function () {
addTap (this);
}
}
}
fonction addtap (obj) {
$ (obj) .on ("tap", function () {
// Appel ImageView
ImageView ($ (obj) [0] .Index, AIMGSRC);
})
}
}) ();
</cript>
</docy>
Ce qui précède est l'intégralité du contenu de cet article. J'espère que tu l'aimes