jQuery réalise un glissement panoramique à 360° display

jQuery réalise un glissement panoramique à 360° display_jquery

WBOY

Libérer： 2016-05-16 16:08:32

original

1404 Les gens l'ont consulté

CSS

html,corps{arrière-plan :#333;}

 #loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;}

 #loading span{left:45%;top:40%;font:normal 50px Arial;color:#fff;}

 #démo{gauche:50%;top:50%;margin-left:-512px;margin-top:-384px;largeur:1024px;hauteur:768px;}

 #demo img{border-radius:8px;border:5px solid #555;}

 .back{font-size:18px;line-height:130%;padding:8px 20px;color:#fff;}

 #back-home{left:0px;top:0px;background:#35916D;}

 #retour-article{right:0px;top:0px;background:#444;}

 #back-download{right:0px;bottom:0px;background:#CE565D;}

HTML

复制代码代码如下 :

drag.js

Copier le code Le code est le suivant :

(fonction($){

    $.fn.drag360=fonction(images){

        var mdx,mmx,isDrag=false,unitStep=40,current=0;

        var ça=$(this);

        var longueur=images.longueur;

        //触摸  

        that.on('touchstart',function(e){

            var touch = e.originalEvent;

                mdx = touch.changedTouches[0].pageX;

                isDrag=true;

        }).on('touchmove',function(e){

            e.preventDefault();

            touch = e.originalEvent.touches[0]||e.originalEvent.changedTouches[0];

            mmx=touch.pageX;

            si(isDrag){

                if(Math.abs(mmx-mdx)>unitStep){

                    si(mmx-mdx>0){

                        courant = courant 1 ; 

                    }autre{

                        courant=courant-1;

                    >

                    mdx=mmx;

                    si (actuel<0)actuel=longueur-1;

                    si (actuel> longueur-1)actuel=0;

                    that.attr("src",images[current]);

                >

            >

        }).on('touchend',function(e){

            isDrag=false;

        });

        //拖动

        that.on('mousedown',function(e){

            mdx=e.pageX;

            isDrag=true;

        }).on('mousemove',function(e){

            mmx=e.pageX;

            si(isDrag){

                if(Math.abs(mmx-mdx)>unitStep){

                    courant=courant (mmx-mdx>0?1:-1);

                    mdx=mmx;

                    si (actuel<0)actuel=longueur-1;

                    si (actuel> longueur-1)actuel=0;

                    that.attr("src",images[current]);

                >

            >

            retourner faux ;

        })
         $(document).on('mouseup',function(e){

               isDrag=false;

        });

          $(document).on('mouseleave',function(e){

               isDrag=false;

        });

         renvoie ceci ;

};

})(jQuery);

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