Método de chamada: ImageView (índice, imgdata) -Parâmetro Index é o valor do índice exibido pela imagem padrão, o tipo é o número -parâmetro de imadata é a matriz de URL da imagem, o tipo é a matriz
Antes de usá -lo, você deve primeiro importar o arquivo zepto.js
O código específico do ImageView.js é o seguinte:
A cópia do código é a seguinte:
/*
* ImageView v1.0.0
* -big imagem baseada em zepto.js
* -Calling Method ImageView (index, imgdada)
* -Index Picture Valor padrão Exibir índice, Número --Imgdata Picture URL Array, Array
* */
var imageview = (function (janela, $) {
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;
/**
* Evento de objeto de evento
*/
Var Event = {
Touchstart: function (e) {
E.PreventDefault ();
if (_AdvancedSupport && e.ToChares && e.touches.length> = 2) {
var iMg = getImg ();
$ (img) .css ({"-webkit-transiçãoDuration": "0ms", "transitionDuration": "0ms"});
_doubleZoomorg = _zoom;
_doubledistorg = getDist (e.ToChares [0] .Pagex, E.Touches [0] .Pagey, E.Touches [1] .Pagex, e.ToChares [1] .Pagey);
isdoublezoom = true;
Retornar
}
e = e.ToCouches? E.ToChares [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-transiçãoDuration": "0ms", "transitionDuration": "0ms"}));
isdrag = true
}outro{
_This.Find (".
ISSLIDE = true
}
},
touchmove: function (e) {
E.PreventDefault ();
if (_AdvancedSupport && e.ToChares && e.touches.length> = 2) {
var newDist = getDist (e.ToChares [0] .Pagex, e.ToChares [0] .Pagey, E.Touches [1] .Pagex, e.ToChares [1] .Pagey);
_zoom = (newdist/_doubledistorg) * _doublezoomorg
var iMg = getImg ();
$ (img) .css ({"-webkit-transiçãoDuration": "0ms", "transitionDuration": "0ms"});
if (_zoom <1) {
_zoom = 1;
_ZoomXy = [0, 0];
$ (img) .css ({"-webkit-transiçãoDuration": "200ms", "transitionDuration": "200ms"})
} else if (_zoom> getScale (img) * 2) {
_zoom = getScale (img) * 2;
}
$ (img) .css ({"-webkit-transform": "escala (" + _zoom + ") translate (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "transform": "escala (" + _ZOOM + ") translate (" _zom) ",". "px)"});
Retornar
}
if (isdoublezoom) {
retornar;
}
e = e.ToCouches? E.ToChares [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 + ") tradução (" + _zoomxy [0] +
"px", + _zoomxy [1] + "px)", "transform": "escala (" + _Zoom + ") tradutor (" + _zoomxy [0] +
"px", + _zoomxy [1] + "px)"})
}outro{
if (! isslide) retornar;
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) translatez (0)"});
}
},
Toukend: function (e) {
if (isdoublezoom) {
retornar;
}
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 updateLelta = 0;
var switchdelta = winw / 6;
if (_ZoomXy [0] <-borderx - switchdelta / _zoom && _index <_length - 1) {
UpdateTelta = 1;
} else if (_zoomxy [0]> borderx + switchdelta / _zoom && _index> 0) {
atualizadalta = -1;
}
if (updateTelta! = 0) {
Scaledown (IMG);
changeIndex (_index + updatedelta);
Retornar
}
}
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-transição": "400ms cubic-bezier (0,08,0,65,0,79,1)", "transição": "400ms cubic-bezier (0,08,0,65,0,7,1)"})
} outro{
$ (img) .css ({"-webkit-transição": "200ms linear", "transição": "200ms linear"});
}
if (borderx> = 0) {
if (_ZoomXy [0] <-borderx) {
_Zoomxy [0] = -Borderx;
} else if (_zoomxy [0]> borderx) {
_Zoomxy [0] = borderx;
}
}
if (fronteira> 0) {
if (_ZoomXy [1] <-bordery) {
_Zoomxy [1] = -bordery;
} else if (_ZoomXy [1]> fronteira) {
_ZoomXy [1] = Dinâma;
}
}
if (math.abs (_zoomxy [0]) <10) {
$ (img) .css ({"-webkit-transform": "escala (" + _zoom + ") traduz (0px," + _zoomxy [1] + "px)", "transform": "escala (" + _zoom + ") traduzente (0px," + _Zoomxy [1]
Retornar
} outro{
$ (img) .css ({"-webkit-transform": "escala (" + _zoom + ") translate (" + _zoomxy [0] + "px," + _zoomxy [1] + "px)", "transform": "escala (" + _ZOOM + ") translate (" _zom) ",". "px)"});
}
isdrag = false
}outro{
if (! isslide) {return;}
var deltax = _transx - -_index * winw;
var updateLelta = 0;
if (deltax> 50) {
atualizadalta = -1;
} else if (deltax <-50) {
UpdateTelta = 1;
}
_index = _index+atualizada;
ChangeIndex (_index);
ISSLIDE = false
}
},
Clique: função (e) {
_zoom = 1;
_ZoomXy = [0,0];
_This.css ("opacidade", "0");
Timer = setTimeout (function () {
_This.css ({"display": ""}). html ("");
desbind ();
}, 150)
},
Dobeltap: function (e) {
ClearTimeout (timer);
var agora = nova data;
if (agora - _lasttapdate <500) {
retornar;
}
_lasttapdate = agora;
var iMg = getImg ();
if (! img) {
retornar;
}
if (_zoom! = 1) {
Scaledown (IMG);
}outro{
ScaleUp (IMG);
}
},
setView: function (e) {
winw = window.innerwidth;
winh = window.innerHeight;
_This.Width (Window.innerWidth) .Height (Window.innerHeight);
traduzir ((-_ index*window.innerwidth), 0,0, $ (". PV Inner") [0]);
Scaledown (getimg ())
}
};
var handleEvent = function (e) {
Switch (E.Type) {
case "touchstart":
Event.Touchstart (e);
quebrar;
case "touchmove":
Event.TouchMove (e);
quebrar;
case "touchcancel":
Case "Toukend":
Event.Touchend (e);
quebrar;
Caso "OrientationChange":
caso "redimensione":
Event.SetView (e);
quebrar
}
};
/**
* Eventos de ligação
*/
var bind = function () {
_This.on ("SingLetap", function (e) {
E.PreventDefault ();
var agora = nova data;
if (agora - _lasttapdate <500) {
retornar;
}
_lasttapdate = agora;
Event.Click (e);
retornar falso;
}).
E.PreventDefault ();
Event.Dobeltap (e);
retornar falso;
});
_This.on ("TouchStart Touchmove TouchEnd TouchCancel", function (e) {
handlevent (e);
});
Event.setView ();
"OnorientationChange" na janela? window.adDeventListener ("OrientationChange", Event.SetView, false): Window.adDeventListener ("REDIMENTE", EVENT.SETVIEW, FALSE);
};
/**
* Evento de liberação
*/
var despind = function () {
_This.off ();
"OnorientationChange" na janela? Window.removeEventListener ("OrientationChange", Event.SetView, false): Window.removeEventListener ("Redize", 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 da imagem
*/
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);
se (escala> 1)
$ (img) .css ({"-webkit-transform": "escala (" + escala + ")", "transform": "escala (" + escala + ")", "-webkit-transição": "200ms", "transição": "200ms"});
_zoom = escala;
};
var scaledown = function (img) {
_zoom = 1;
_ZoomXy = [0, 0];
_doubledistorg = 1;
_doubleZoomorg = 1;
$ (img) .css ({"-webkit-transform": "escala (1)", "transform": "escala (1)", "-webkit-transição": "200ms", "transition": "200ms"});
};
/**
* Efeito deslizante
* dist
*/
var tradutor = função (distx, disty, velocidade, 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) tradutor (' + disty + 'px)';
};
/**
* Alterar o índice Value_index
*/
var alteningIndex = função (índice, força) {
if (índice <0) {
índice = 0;
} else if (index> = _length) {
índice = _length - 1;
}
_index = index;
traduzir ((-_ index*window.innerwidth), 0, force? "0": "200", $ (". PV-Inner") [0]);
$ ("#J_index"). Html (_index+1+"/"+_ comprimento);
imgload ();
}
/**
* Aquisição de imagem
*/
var getImg = function (index) {
var iMg = _This.find ("li"). Eq (index || _index) .find ("img");
if (img.size () == 1) {
retornar img [0];
}outro{
retornar nulo
}
}
/**
* Carregamento da imagem
*/
var imgload = function () {
if ($ (".
$ ("#J_loading"). Css ("display", "");
retornar;
}outro{
$ ("#J_loading"). Css ("display", "bloco");
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", "");
}
}
};
/**
* Crie uma imagem grande para ver a estrutura da cúpula
*/
var cria = function () {
_This.Append ("<Span Class = 'PV-Inner'> </ul>"). Anexo ("<P class = 'counts'> <span class = 'value' id = 'j_index'>"+(_ _ _ _ ">"/"/"+_ length+"</span> </pi"). class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> ")
for (var i = 0; i <_length; i ++) {
$ (". PV-Inner"). Appender ("<li class = 'pv-img'> </li>")
}
imgload ();
};
/**
* Imagem grande para visualizar a inicialização
*/
var init = function () {
!! _ this [0] || $ ("corpo"). Anexe ("<div class = 'slide-view' id = 'slideView'> </div>");
_This = $ ("#slideView");
($ .os.iphone || $ .os.android && parsefloat ($. os.version)> = 4) && (_ AdvancedSupport = true);
} ();
/**
* Veja a função de interface de retorno em grande imagem
* ImageView (índice, dados)
* ÍNDICE ÍNDICE VALOR INDEX NUBMER
* Array de imagem de dados Array
*/
var imageview = function (índice, dados) {
_Imgdata = dados;
_index = index;
_length = data.length;
// Crie uma estrutura DOM
Criar();
// Exibição da estrutura DOM
_This.Css ("Display", "Block");
// Evento de ligação
vincular();
}
retornar imageview;
}) (janela, zepto);
O código CSS usado pelo ImageView.js é o seguinte:
A cópia do código é a seguinte:
/*Vista de imagem grande*/
.Slide-View {Background: #000; Posição: fixo; largura: 100%; altura: 100%; transbordamento: oculto; topo: 0; esquerda: 0; z-index: 100; opacidade: 0; display: nenhum; -webkit-animação: -wein .2s para frente; nenhum; -Webkit-transform-estilo: preserve-3d; }
.Slide-View .Counts {Posição: Absoluto; TOP: 5%; esquerda: 0; direita: 0; Alinhamento de texto: Centro; font-size: 0; -Webkit-transform-estilo: Preserve-3D; }
.Slide-View .Counts .Value {Radio de fronteira: 9px; altura da linha: 18px; preenchimento: 0 6px; tamanho da fonte: 11px; Display: Inline-Block; Background-Color: RGBA (102,102.102, .6); cor: #f1f1;}
.pv-interno {Posição: relativo; z-index: -1; display: -webkit-box; display: caixa; largura: 100%; altura: 100%;-transição webkit: todos os 350ms lineares; -web-cit-back-visibilidade: hidden; transição: todos os 350ms linear; nenhum; -Webkit-transform-estilo: preserve-3d; }
.pv-interno li {text-align: Center; Display: -Webkit-box; Display: Box; -Webkit-Box-Align: Center; Overflow: Hidden; largura: 100%; Altura: 100%;-Webkit-Touch-calout: Nenhum; Backface-visibilidade: Hidden; }
.PV IMG IMG {max-lar: 97%; Max-Hight: 100%;-Webkit-Transform: Scale (1) Traduzir (0px, 0px); transabilitação: escala (1) tradução (0px, 0px); visibilidade: -webkit-transition: 200ms; Nenhum; Display: Block; Margem: 0 Auto; Visibilidade da Backface: Hidden; -Webkit-Transform-Style: Preserve-3D; }
@-webkit-keyframes fadein {
0%{Opacity: 0;}
100%{Opacity: 1;}
}
@keyframes fadein {
0%{Opacity: 0;}
100%{Opacity: 100%;}
}
/*--------------------carregando-----------------------*/
.ui -carregamento {posição: absoluto; esquerda: 50%; topo: 50%; display: nenhum; vertical -align: médio; fonte: 0/0 ARIAL; margem: -5px 0 0 -10px;}
.ui-carregamento i {display: inline-block; largura: 5px; altura: 12px; fundo: #ffff; alinhamento vertical: top; -webkit-animação: linear linear de carregamento 1s 1s 1s: animação: linear de 1s de carga 1s;}}
.ui-carregamento i {-webkit-animação: carregando spin 1s infinito linear; animação: carregando spin 1s infinito linear}
.ui-carregamento i.t2 {margin: 0 3px; -Webkit-animation-name: carregando-spin-one; nome de animação: carregando-spin-one}
.ui-carregamento i.t3 {-webkit-animation-name: carregando spin-two; animação-name: carregando spin-two}
@-webkit-keyframes carregando spin {
0% {Opacity: 0}
30% {Opacity: 1; -webkit-transform: escala (1,1.2)}
60% {Opacity: 0; -webkit-transform: escala (1)}
100% {Opacity: 0}
}
@-webkit-keyframes carregando spin-one {
0% {Opacity: 0}
20% {Opacity: 0}
50% {Opacity: 1; -webkit-transform: escala (1,1.2)}
80% {Opacity: 0; -Webkit-transform: Scale (1)}
100% {Opacity: 0}
}
@-Webkit-KeyFrames Loading-spin-two {
0% {Opacity: 0}
40% {Opacity: 0}
70% {Opacity: 1; -webkit-transform: escala (1,1.2)}
100% {Opacity: 0; -Webkit-transform: Scale (1)}
}
@keyframes carregando spin {
0% {Opacity: 0}
30% {Opacity: 1; Transform: Scale (1,1.2)}}
60% {Opacity: 0; Transform: Scale (1)}
100% {Opacity: 0}
}
@keyframes carregando spin-one {
0% {Opacity: 0}
20% {Opacity: 0}
50% {Opacity: 1; Transform: Scale (1,1.2)}
80% {Opacity: 0; Transform: Scale (1)}
100% {Opacity: 0}
}
@keyframes carregando spin-two {
0% {Opacity: 0}
40% {Opacity: 0}
70% {Opacity: 1; Transform: Scale (1,1.2)}
100% {Opacity: 0; Transform: Scale (1)}
}
/*---------------
PS: A função de código é relativamente simples e pode haver muitos problemas. Mas pode ser usado apenas
A seguir, é apresentado um exemplo de uso do ImageView.js:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "largura = largura do dispositivo, escala inicial = 1,0, escala mínima = 1,0, escala máxima = 1,0, escalável do usuário = não">
<title> Visualização de imagem grande móvel </title>
<script type = "text/javascript" src = "test_files/zepto.min.js">/script>
<script type = "text/javascript" src = "test_files/imageview.js">/script>
</head>
<Body>
<!-O acima é a estrutura da página HTML->
<!-a seguir é um exemplo de uso do ImageView->
<Cript>
;(função(){
// Obtenha os elementos da imagem em html
var aimg = document.QuerySelectorAll ("img"),
Aimgsrc = [];
// Ligue o evento de clique para a imagem
for (var i = 0, l = aimg.length; i <l; i ++) {
Aimg [i] .Index = i;
Aimg [i] .className+= "conpic";
aimgsrc.push (aimg [i] .src);
}
for (var i = 0; i <$ (". Conpic"). comprimento; i ++) {
if ($ (". Conpic") [i] .Complete) {
Addtap ($ (". Conpic") [i])
}outro{
$ (". Conpic") [i] .onload = function () {
addtap (this);
}
}
}
função addtap (obj) {
$ (obj) .on ("tap", function () {
// chamando ImageView
ImageView ($ (obj) [0] .Index, AIMGSRC);
})
}
}) ();
</script>
</body>
O acima é o conteúdo inteiro deste artigo. Espero que gostem