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);
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
