Método de llamada: ImageView (índice, imgData) -El parámetro Index es el valor de índice que se muestra por la imagen predeterminada, el tipo es el número --imadata el parámetro es la matriz de url de imagen, el tipo es la matriz es la matriz
Antes de usarlo, primero debe importar el archivo ZeptO.js
El código específico de ImageView.js es el siguiente:
La copia del código es la siguiente:
/*
* ImageView v1.0.0
* -Imagen de big basada en zepto.js
* -Método de llamado ImageView (índice, imgdada)
* -INDEX PICTURA Valor predeterminado In Índice, Número -Array de URL de imagen IMGDATA, matriz
* */
var imageView = (function (ventana, $) {
var _this = $ ("#slideview"), _ imgdata = [], _ index = 0, _length = 0,
_Start = [], _ org = [], _ Orgtime = null,
_lasttapdate = nulo,
_zoom = 1, _zoomxy = [0,0], _ transx = null,
_AdvancedSupport = false,
_doubbledistorg = 1, _DoubleZoomorg = 1, ISDoubleZoom = False,
isslide = true, isDrag = false, timer = null,
winw = window.innerwidth, winh = window.innerheight;
/**
* Evento de objeto Evento
*/
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;
_doubbledistorg = getDist (e.touches [0] .pagex, e.touches [0] .pagey, e.touches [1] .pagex, e.touches [1] .pagey);
isDoubleZoom = True;
Devolver
}
E = E.Touches? E.Touches [0]: E;
isDoubleZoom = falso;
_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 = verdadero
}demás{
_THIS.Find (".
isslide = verdadero
}
},
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] .pagex, e.touches [1] .pagey);
_zoom = (newdist/_doublbledistorg) * _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": "escala (" + _zoom + ") traduce (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "transformar": "escala (" + _zoom + ") traducir (" + _zoomxy [0] + "px, + _xoomx [1] [1] [1] [] traducir "Px)"});
Devolver
}
if (isDoubleZoom) {
devolver;
}
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": "escala (" + _zoom + ") traduce (" + _zoomxy [0] +
"Px", + _zoomxy [1] + "Px)", "transformar": "escala (" + _zoom + ") traduce (" + _zoomxy [0] +
"Px", + _zoomxy [1] + "Px)"})
}demás{
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": "traduce (" + _transx + "px, 0px) traducez (0)"});
}
},
touchend: function (e) {
if (isDoubleZoom) {
devolver;
}
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 actualizatedelta = 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 (UpdateatedEtta! = 0) {
Scaledown (IMG);
ChangeIndex (_Index + UpdateTelta);
Devolver
}
}
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": "400ms cúbico-bezier (0.08,0.65,0.79,1)", "transición": "400 ms cúbico-bezier (0.08,0.65,0.79,1)"})
} demás{
$ (img) .css ({"-WebKit-Transition": "200ms Lineal", "Transition": "200ms Lineal"});
}
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]) <10) {
$ (img) .css ({"-webkit-transform": "escala (" + _zoom + ") traduce (0px," + _zoomxy [1] + "px)", "transformar": "escala (" + _zoom + ") (0px," + _zoomxy [1] + "px)"});
Devolver
} demás{
$ (img) .css ({"-webkit-transform": "escala (" + _zoom + ") traduce (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "transformar": "escala (" + _zoom + ") traducir (" + _zoomxy [0] + "px, + _xoomx [1] [1] [1] [] traducir "Px)"});
}
isdrag = falso
}demás{
if (! isslide) {return;}
var deltax = _transx - -_index * winw;
var actualizatedelta = 0;
if (deltax> 50) {
UpdateDelta = -1;
} else if (deltax <-50) {
UpdateDelta = 1;
}
_Index = _index+UpdateTelta;
ChangeIndex (_index);
isslide = falso
}
},
Haga clic en: función (e) {
_zoom = 1;
_zoomxy = [0,0];
_THIS.CSS ("Opacidad", "0");
timer = setTimeOut (function () {
_THIS.CSS ({"Display": ""}). Html ("");
desatar();
}, 150)
},
Dobeltap: function (e) {
ClearTimeOut (temporizador);
var ahora = nueva fecha;
if (ahora - _lasttapdate <500) {
devolver;
}
_lasttapdate = ahora;
var img = getImg ();
if (! img) {
devolver;
}
if (_zoom! = 1) {
Scaledown (IMG);
}demás{
escala (img);
}
},
setView: function (e) {
winw = window.innerWidth;
winh = window.innerheight;
_This.Width (Window.innerWidth) .Height (Window.innerHeight);
traducir ((-_ index*window.innerWidth), 0,0, $ (". PV-inner") [0]);
Scaledown (getImg ())
}
};
var handleEvent = function (e) {
Switch (E.Type) {
Caso "TouchStart":
Event.TouchStart (e);
romper;
Caso "Touchmove":
Event.TouchMove (E);
romper;
Caso "TouchCancel":
Caso "Touchend":
Event.Touchend (e);
romper;
Caso "OrientationChange":
Caso "cambiar de tamaño":
Event.setView (e);
romper
}
};
/**
* Eventos vinculantes
*/
var bind = function () {
_THIS.ON ("SINGLETAP", FUNCIÓN (E) {
E.PreventDefault ();
var ahora = nueva fecha;
if (ahora - _lasttapdate <500) {
devolver;
}
_lasttapdate = ahora;
Evento. Haga clic (E);
devolver falso;
}). on ("doubletap", function (e) {
E.PreventDefault ();
Event.dobeltap (e);
devolver falso;
});
_THIS.on ("TouchStart Touchmove TouchDCancel", function (e) {
HandleEvent (e);
});
Event.setView ();
"OnorientationChange" en la ventana? Window.AdDeventListener ("OrientationChange", event.setView, falso): window.addeventListener ("RESEZE", Event.SetView, falso);
};
/**
* Evento de lanzamiento
*/
var sinbind = function () {
_THIS.OFF ();
"OnorientationChange" en la ventana? Window.RemoveEventListener ("OrientationChange", Event.SetView, False): Window.RemoveEventListener ("RESEZE", Event.SetView, False)
};
var getDist = function (x1, y1, x2, y2) {
return math.sqrt (math.pow (x2 - x1, 2) + math.pow (y2 - y1, 2), 2)
}
/**
* Zoom de imagen
*/
var getscale = function (img) {
var h = img.naturalHeight, w = img.naturalwidth,
Escala = w*h/(img.clientHeight*img.clientwidth);
escala de retorno;
};
var scaleUp = function (img) {
VAR SCALE = GETSCALE (IMG);
if (escala> 1)
$ (img) .css ({"-webkit-transform": "escala (" + escala + ")", "transformar": "escala (" + escala + ")", "-webkit-transition": "200ms", "transición": "200ms"});
_zoom = escala;
};
var scaleDown = function (img) {
_zoom = 1;
_zoomxy = [0, 0];
_doubbledistorg = 1;
_DoubleZoMorg = 1;
$ (img) .css ({"-webkit-transform": "escala (1)", "transformar": "escala (1)", "-webkit-transition": "200ms", "transición": "200ms"});
};
/**
* Efecto deslizante
* Dist
*/
var traducir = 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 = 'Traduce (' + Distx + 'Px,' + Disty + 'Px)' + 'TranslateZ (0)';
ELE.MSTRANSFORM = ELE.MOZTRANSFORM = ELE.OTRANSFORM = 'Translatex (' + Distx + 'Px) Translatey (' + Disty + 'Px)';
};
/**
* Cambiar el valor del valor_index
*/
var changeIndex = function (index, force) {
if (index <0) {
índice = 0;
} else if (index> = _length) {
índice = _length - 1;
}
_index = index;
traducir ((-_ index*window.innerwidth), 0, force? "0": "200", $ (". PV-inner") [0]);
$ ("#J_index"). Html (_index+1+"/"+_ longitud);
imgLoad ();
}
/**
* Adquisición de imágenes
*/
var getImg = function (index) {
var img = _this.find ("li"). eq (índice || _index) .find ("img");
if (img.size () == 1) {
devolver img [0];
}demás{
regresa nulo
}
}
/**
* Carga de imágenes
*/
var imgLoad = function () {
if ($ (". pv-img"). eq (_index) .find ("img") [0]) {
$ ("#J_loading"). CSS ("Display", "");
devolver;
}demás{
$ ("#J_loading"). CSS ("Display", "Bloque");
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", "");
}
}
};
/**
* Crear una imagen grande para ver la estructura del domo
*/
var create = function () {
_this.append ("<<span class = 'pv-inner'> </ul>"). append ("<p class = 'Counts'> <span class = 'value' id = 'j_index'>"+(_ index+1)+"/"+_ longitud+"</span> </p>"). class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> ")
para (var i = 0; i <_length; i ++) {
$ (". PV-Inner"). Append ("<li class = 'pv-img'> </li>")
}
imgLoad ();
};
/**
* Imagen grande para ver la inicialización
*/
var init = function () {
!! _ this [0] || $ ("cuerpo"). append ("<div class = 'slide-view' id = 'slideView'> </div>");
_this = $ ("#slideview");
($ .os.iphone || $ .os.android && parsefloat ($. OS.version)> = 4) && (_ AdvancedSupport = true);
} ();
/**
* Ver la función de interfaz de retorno en una imagen grande
* ImageView (índice, datos)
* Índice del valor del índice inicial NUBMER
* matriz de matriz de imágenes de datos
*/
var imageView = function (index, data) {
_ImgData = data;
_index = index;
_length = data.length;
// crear una estructura DOM
Crear();
// pantalla de estructura DOM
_THIS.CSS ("Display", "Bloque");
// evento vinculante
unir();
}
return imageView;
}) (ventana, zepto);
El código CSS utilizado por ImageView.js es el siguiente:
La copia del código es la siguiente:
/*Vista de imagen grande*/
.Slide-View {fondo: #000; posición: fijo; ancho: 100%; altura: 100%; desbordamiento: oculto; arriba: 0; izquierda: 0; z-index: 100; opacidad: 0; visual Preserve-3d; }
.Slide-View .Counts {posición: Absolute; arriba: 5%; izquierda: 0; derecha: 0; text-align: centro; 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 {posición: relativo; z-index: -1; display: -webkit-box; display: box; ancho: 100%; altura: 100%;-Webkit-transición: todos los 350ms lineal; -webkit-backface-visibilidad: oculto; transición: todos los 350 ms lineal; versibility: visability: shidden; -webkit-chouch-callout :--choáceo :--ceácido:-chouch: ninguno; -Webkit-Transform-Style: Preserve-3D; }
.PV-inner li {text-align: Center; display: -webkit-box; display: box; -webkit-box-align: Center; desbordamiento: oculto; ancho: 100%; altura: 100%;-webkit-callout: ninguna; visión de atrás: hidden; -webkit-transform-style: preserve-3d; }
.PV-inner img {max-width: 97%; max-height: 100%;-webkit-transform: scale (1) traduce (0px, 0px); transability: scale (1) translate (0px, 0px); visibilidad: visible; -webkit-transition: 200ms; transition: 200ms; -webkit-user-select: Ninguno; Ninguno; Ninguno; Ninguno; bloque; margen: 0 auto; visibilidad de respaldo: oculto; -webkit-transform-style: Preserve-3D; }
@-webkit-keyframes fadein {
0%{opacidad: 0;}
100%{opacidad: 1;}
}
@Keyframes Fadein {
0%{opacidad: 0;}
100%{opacidad: 100%;}
}
/*--------------------cargando-----------------------*/
.ui -carga {posición: absoluto; izquierda: 50%; arriba: 50%; visual
.ui-carging i {display: inline-block; ancho: 5px; altura: 12px; fondo: #ffff; vertical-align: top; -webkit-animation: carging-spin 1s infinito lineal; animación: carga-spin 1s infinito lineal;}
.ui-carga i {-webkit-animation: carging-spin 1s infinito lineal; animación: carga-spin 1s infinito lineal}
.ui-carga i.t2 {margen: 0 3px; -webkit-animation-name: loading-spin-one; name de animación: carga-spin-}}
.ui-carga i.t3 {-webkit-animation-name: loading-spin-two; name de animación: carga-spin-two}
@-webkit-keyframes de carga de carga {
0% {Opacidad: 0}
30% {opacidad: 1; -webkit-transform: escala (1,1.2)}
60% {opacidad: 0; -webkit-transform: escala (1)}
100% {opacidad: 0}
}
@-webkit-keyframes cargando-spin-one {
0% {Opacidad: 0}
20% {opacidad: 0}
50% {opacidad: 1; -webkit-transform: escala (1,1.2)}
80% {opacidad: 0; -webkit-transform: escala (1)}
100% {opacidad: 0}
}
@-webkit-keyframes cargando-spin-dos {
0% {Opacidad: 0}
40% {opacidad: 0}
70% {opacidad: 1; -webkit-transform: escala (1,1.2)}
100% {opacidad: 0; -webkit-transform: escala (1)}
}
@Keyframes Carging-Spin {
0% {Opacidad: 0}
30% {opacidad: 1; transformación: escala (1,1.2)}
60% {opacidad: 0; transformación: escala (1)}
100% {opacidad: 0}
}
@Keyframes Carging-Spin-one {
0% {Opacidad: 0}
20% {opacidad: 0}
50% {opacidad: 1; transformación: escala (1,1.2)}
80% {opacidad: 0; transformación: escala (1)}
100% {opacidad: 0}
}
@Keyframes Carging-Spin-Two {
0% {Opacidad: 0}
40% {opacidad: 0}
70% {opacidad: 1; transformación: escala (1,1.2)}
100% {opacidad: 0; transformación: escala (1)}
}
/*---------------------End de carga ----------------------*/
PD: La función del código es relativamente simple y puede haber muchos problemas. Pero se puede usar apenas
El siguiente es un ejemplo de usar imageView.js:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<Meta name = "Viewport" content = "width = dispositivo-width, inicial-escala = 1.0, escala mínima = 1.0, máxima escala = 1.0, escala de usuario = no">
<title> Vista de imagen grande móvil </title>
<script type = "text/javaScript" src = "test_files/zepto.min.js">/script>
<script type = "text/javaScript" src = "test_files/imageView.js">/script>
</ablo>
<Body>
<!-lo anterior es la estructura de la página HTML->
<!-El siguiente es un ejemplo de uso de ImageView->
<script>
;(función(){
// Obtener los elementos de la imagen en HTML
var aImg = document.QuerySelectorAll ("img"),
AIMGSRC = [];
// Binde el evento de clic para la imagen
para (var i = 0, l = aimg.length; i <l; i ++) {
AIMG [i] .index = i;
AIMG [i] .className+= "Conpic";
AIMGSRC.PUSH (AIMG [I] .src);
}
para (var i = 0; i <$ (". Conpic"). Longitud; i ++) {
if ($ (". Conpic") [i] .complete) {
addTap ($ (". Conpic") [i])
}demás{
$ (". Conpic") [i] .onload = function () {
addtap (esto);
}
}
}
función addTap (obj) {
$ (obj) .on ("tap", function () {
// llamando a ImageView
ImageView ($ (OBJ) [0] .index, AIMGSRC);
})
}
}) ();
</script>
</body>
Lo anterior es todo el contenido de este artículo. Espero que te guste