Explication détaillée d'ImageView.js, un grand composant de visualisation d'images qui imite l'espace QQ d'un téléphone mobile basé sur les compétences zepto.js_javascript

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

Introduisez le fichier zepto.js avant de l'utiliser

Le code spécifique de ImageView.js est le suivant :

Copier le code Le code est le suivant :

/*
* 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);

　

Le code css utilisé par ImageView.js est le suivant :

Copier le code Le code est le suivant :

/*大图查看*/
.slide-view {arrière-plan : #000 ; position : fixe ; largeur : 100 % ; hauteur : 100 % ; débordement : caché ; haut : 0 ; gauche : 0 ; z-index : 100 ; opacité : 0 ; affichage : aucun ; -webkit-animation:fadeIn .2s avant linéaire;animation:fadeIn .2s avant linéaire;-webkit-touch-callout: aucun;-webkit-transform-style:preserve-3d; >
.slide-view .counts {position : absolue ; haut : 5 % ; gauche : 0 ; droite : 0 ; texte-align : centre ; taille de police : 0 ;-webkit-transform-style : préserver-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); couleur : #f1f1f1;>
.pv-inner {position : relative ;z-index : -1 ;affichage : -webkit-box;affichage : boîte;largeur : 100 % ;hauteur : 100 % ;-webkit-transition : tous les 350 ms linéaires ;-webkit-backface -visibilité : cachée ;transition : toutes les 350 ms linéaires ;visibilité de la face arrière : cachée ;-webkit-touch-callout : aucune ;-webkit-transform-style : préserver-3d ; >
.pv-inner li {text-align : centre ; affichage : -webkit-box ; affichage : boîte ;-webkit-box-align : centre ; débordement : caché ; largeur : 100 % ; hauteur : 100 % ;-webkit-touch -callout : aucun ; visibilité arrière : cachée ;-webkit-transform-style : préserver-3d ; >
.pv-inner img {largeur maximale : 97 % ; hauteur maximale : 100 % ;-webkit-transform : scale(1) translation(0px,0px);transform : scale(1) translation(0px,0px);visibilité : visible ; : préserver-3d; >
@-webkit-keyframes fadeIn{
    0 %{opacité:0;}
    100 %{opacité:1;}
>
@keyframes fadeIn{
    0 %{opacité:0;}
    100 %{opacité:100%;}
>
/*------------------------chargement-----------------------*/
.ui-loading {position : absolue ;gauche : 50 %;haut : 50 %;affichage : aucun;alignement vertical : milieu;police : 0/0 arial;marge : -5px 0 0 -10px;}
.ui-loading i {affichage : inline-block ; largeur : 5px; hauteur : 12px; arrière-plan : #fff; alignement vertical : top;-webkit-animation : chargement-spin 1s linéaire infini ; animation : chargement-spin 1s infini linéaire ;>
.ui-loading i {-webkit-animation : chargement-spin 1s infini linéaire;animation : chargement-spin 1s infini linéaire}
.ui-loading i.t2 {marge : 0 3px;-webkit-animation-name : chargement-spin-one;animation-name : chargement-spin-one}
.ui-loading i.t3 {-webkit-animation-name : chargement-spin-two;animation-name : chargement-spin-two}
@-webkit-keyframes chargement-spin {
    0 % {opacité : 0}
    30 % {opacité : 1;-webkit-transform : scale(1,1.2)}
    60 % {opacité : 0;-webkit-transform : scale(1)}
    100 % {opacité : 0}
>
@-webkit-keyframes chargement-spin-one {
    0 % {opacité : 0}
    20 % {opacité : 0}
    50 % {opacité : 1;-webkit-transform : scale(1,1.2)}
    80 % {opacité : 0;-webkit-transform : scale(1)}
    100 % {opacité : 0}
>
@-webkit-keyframes chargement-spin-deux {
    0 % {opacité : 0}
    40 % {opacité : 0}
    70 % {opacité : 1;-webkit-transform : scale(1,1.2)}
    100 % {opacité : 0;-webkit-transform : scale(1)}
>
@keyframes chargement-spin {
    0 % {opacité : 0}
    30 % {opacité : 1 ; transformation : échelle (1,1.2)🎜>     60 % {opacité : 0;transformation : échelle(1)}
    100 % {opacité : 0}
>
@keyframes chargement-spin-one {
    0 % {opacité : 0}
    20 % {opacité : 0}
    50 % {opacité : 1 ; transformation : échelle (1,1.2)🎜>     80 % {opacité : 0;transformation : échelle(1)}
    100 % {opacité : 0}
>
@keyframes chargement-spin-deux {
    0 % {opacité : 0}
    40 % {opacité : 0}
    70 % {opacité : 1 ; transformation : échelle (1,1.2)🎜>     100 % {opacité : 0 ; transformation : échelle (1)🎜> >
/*-------------------------chargement-fin----------------------*/



ps :
下用是使用ImageView.js的一个例子：

复制代码

代码如下 :

          
           
                                                                                             
          


            
           
                                                                                    ;(fonction(){
//Récupère l'élément image en html
              var aImg=document.querySelectorAll("img"),
aImgSrc=[];
//Lier un événement de clic à l'image
pour(var i=0,l=aImg.length;i                     aImg[i].index=i;
                     aImg[i].className =" conPic";
aImgSrc.push(aImg[i].src);
                }
pour(var i=0;i<$(".conPic").length;i ){
Si($(".conPic")[i].complete){
                           addTap($(".conPic")[i])
                       }autre{
$(".conPic")[i].onload=function(){
                             addTap(this);
                                                                                                          }                  }
                }
fonction addTap(obj){
$(obj).on("tap",function(){
//Appelez ImageView
ImageView($(obj)[0].index,aImgSrc);
                     })
                }
             })();
                                                                                     



Ce qui précède représente l'intégralité du contenu de cet article, j'espère que vous l'aimerez tous