Méthode d'appel : ImageView(index,imgData) --le paramètre index est la valeur d'index affichée par l'image par défaut, le type est Number --imaData le paramètre est un tableau d'URL d'image, le type est Array
/*
* ImageView v1.0.0
* --Visualisation de grandes images basées sur zepto.js
* --Méthode d'appel ImageView(index,imgDada)
* --index Index d'affichage de la valeur par défaut de l'image, Number --imgData Tableau d'URL de l'image, 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 = faux,
_doubleDistOrg=1,_doubleZoomOrg=1,isDoubleZoom = false,
isSlide=true,isDrag=false,timer=null,
winW=window.innerWidth,winH=window.innerHeight;
/**
* Événement objet événement
*/
var Événement={
touchstart:fonction(e){
e.preventDefault();
Si (_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);
est DoubleZoom = vrai ;
revenir
}
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
}autre{
_this.find(".pv-inner").css({"-webkit-transitionDuration":"0ms","transitionDuration":"0ms"});
isSlide = true
}
},
touchmove:fonction(e){
e.preventDefault();
Si (_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"});
si (_zoom < 1) {
_zoom = 1;
_zoomXY = [0, 0];
$(img).css({"-webkit-transitionDuration": "200ms","transitionDuration": "200ms"})
} sinon si (_zoom >getScale(img) * 2){
_zoom = getScale(img) * 2;
>
$(img).css({"-webkit-transform": "scale(" _zoom ") translation(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") traduire(" _zoomXY[0] "px," _zoomXY[1] "px)"});
revenir
>
si (estDoubleZoom){
revenir ;
>
e = e.touches ? e.touches[0] : e;
si (_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 ") translation(" _zoomXY[0]
"px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translation(" _zoomXY[0]
"px", _zoomXY[1] "px)"})
}autre{
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)"});
>
},
fin de contact :fonction(e){
si (isDoubleZoom) {
revenir ;
>
si (_zoom != 1) {
si (!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;
si (_zoomXY[0] < -borderX - switchDelta / _zoom && _index < _length - 1){
updateDelta = 1;
}sinon si (_zoomXY[0] > borderX switchDelta / _zoom && _index > 0){
updateDelta = -1;
>
si (updateDelta != 0) {
scaleDown(img);
changeIndex(_index updateDelta);
revenir
>
>
var delta = Date.now() - _orgTime;
si (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 cube-bézier(0.08,0.65,0.79,1)","transition": "400 ms cube-bézier(0.08,0.65,0.79,1)" })
} autre{
$(img).css({"-webkit-transition": "200 ms linéaire","transition": "200 ms linéaire"});
>
si (borderX >= 0){
si (_zoomXY[0] < -borderX){
_zoomXY[0] = -borderX;
}sinon si (_zoomXY[0] > borderX){
_zoomXY[0] = bordureX;
>
>
si (borderY > 0){
si (_zoomXY[1] < -borderY){
_zoomXY[1] = -borderY;
}sinon si (_zoomXY[1] >borderY){
_zoomXY[1] = bordureY;
>
>
si (Math.abs(_zoomXY[0]) < 10) {
$(img).css({"-webkit-transform": "scale(" _zoom ") traduire(0px," _zoomXY[1] "px)","transform": "scale(" _zoom ") traduire(0px ," _zoomXY[1] "px)"});
revenir
} autre{
$(img).css({"-webkit-transform": "scale(" _zoom ") translation(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") traduire(" _zoomXY[0] "px," _zoomXY[1] "px)"});
>
isDrag = faux
}autre{
if (!isSlide){return;}
var deltaX = _transX - -_index * winW;
var updateDelta = 0;
si (deltaX > 50){
updateDelta = -1;
}sinon si(deltaX < -50){
updateDelta = 1;
>
_index=_index updateDelta;
changeIndex(_index);
isSlide =false
>
},
clic:fonction(e){
_zoom=1;
_zoomXY=[0,0];
_this.css("opacité","0");
timer=setTimeout(function(){
_this.css({"display":""}).html("");
délier();
},150)
},
dobelTap:fonction(e){
clearTimeout(minuterie);
var maintenant = nouvelle date ;
si (maintenant - _lastTapDate < 500){
revenir ;
>
_lastTapDate = maintenant ;
var img = getImg();
si (!img){
revenir ;
>
si (_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=fonction(e){
commutateur (e.type){
cas "touchstart":
Event.touchstart(e);
pause;
cas "touchmove":
Event.touchmove(e);
pause;
cas "touchcancel":
cas "touchend":
Event.touchend(e);
pause;
cas "changement d'orientation":
cas "redimensionner":
Event.setView(e);
pause
>
};
/**
* Événement contraignant
*/
var liaison=fonction(){
_this.on("singleTap",function(e){
e.preventDefault();
var maintenant = nouvelle date ;
si (maintenant - _lastTapDate < 500){
retour;
>
_lastTapDate = maintenant ;
Événement.cliquez(e);
retourner faux ;
}).on("doubleTap", fonction(e) {
e.preventDefault();
Event.dobelTap(e);
retourner faux ;
});
_this.on("touchstart touchmove touchend touchcancel", function(e) {
handleEvent(e);
});
Event.setView();
"onorientationchange" dans la fenêtre ? window.addEventListener("orientationchange",Event.setView,false) : window.addEventListener("resize",Event.setView,false);
};
/**
* * Ignorer l'événement
*/
var unbind= function() {
_this.off();
"onorientationchange" dans la fenêtre ? window.removeEventListener("orientationchange",Event.setView, false) : window.removeEventListener("resize",Event.setView, false)
};
var getDist= function(x1, y1, x2, y2) {
retourner Math.sqrt(Math.pow(x2 - x1, 2) Math.pow(y2 - y1, 2), 2)
>
/**
* Zoom sur les images
*/
var getScale=fonction(img) {
var h = img.naturalHeight, w = img.naturalWidth,
Scale=w*h/(img.clientHeight*img.clientWidth);
Échelle de retour ;
};
var scaleUp=fonction(img) {
var échelle = getScale(img);
si (échelle > 1)
$(img).css({"-webkit-transform": "scale(" scale ")","transform": "scale(" scale ")","-webkit-transition": "200 ms","transition ": "200ms"});
_zoom = échelle ;
};
var scaleDown=fonction(img) {
_zoom = 1;
_zoomXY = [0, 0];
_doubleDistOrg = 1;
_doubleZoomOrg = 1;
$(img).css({"-webkit-transform": "scale(1)","transform": "scale(1)","-webkit-transition": "200 ms","transition": "200 ms "});
};
/**
*Effet coulissant
*dist
*/
var traduire = 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 = 'translate(' + distX + 'px,'+distY+'px)' + 'translateZ(0)';
ele.msTransform = ele.MozTransform = ele.OTransform = 'translateX(' + distX + 'px) translateY(' + distY + 'px)';
};
/**
* 更改索引值 _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" : "200" ,$(".pv-inner")[0]);
$("#J_index").html(_index+1+"/"+_length);
imgLoad();
}
/**
* 图片获取
*/
var getImg=function(index) {
var img = _this.find("li").eq(index || _index).find("img");
if (img.size() == 1){
return img[0];
}else{
return null
}
}
/**
* 图片加载
*/
var imgLoad=function(){
if($(".pv-img").eq(_index).find("img")[0]){
$("#J_loading").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","");
}
}
};
/**
* 创建大图查看Dome结构
*/
var Create=function(){
_this.append("
").append("
"+(_index+1)+"/"+_length+"
").append("
")
for(var i=0;i<_length;i++){
$(".pv-inner").append("
")
}
imgLoad();
};
/**
* 大图查看初始化
*/
var init=function(){
!!_this[0]||$("body").append("
");
_this=$("#slideView");
($.os.iphone || $.os.android && parseFloat($.os.version) >= 4)&&(_advancedSupport = true);
}();
/**
* * Fonction d'interface de retour d'affichage de grande image
* ImageView(index,données)
* numéro de valeur d'index initial d'index
* tableau de tableaux d'images de données
*/
var ImageView = fonction (index, données) {
_ImgData=data;
_index=index;
_length=data.length;
//Créer une structure dom
Créer();
//affichage de la structure dom
_this.css("display","block");
//Événement de liaison
bind();
>
Retourner ImageView ;
})(fenêtre,Zepto);
Comment faire défiler les images en ppt
Comment obtenir un jeton
attributusage
Outils de détection de disque dur recommandés
Comment changer pycharm en chinois
Comment résoudre le problème de téléchargement lent de Baidu Netdisk
Que dois-je faire si eDonkey Search ne parvient pas à se connecter au serveur ?
Introduction à l'utilisation du code complet VBS
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
