jQuery實現360°全景拖曳展示_jquery

CSS

複製程式碼程式碼如下：

html,body{背景:#333;}
 #loading{左:0;頂部:0;寬度:100%;高度:100%;背景:#333;顏色:#fff;}
 #載入跨度{左:45%;上:40%;字體:正常50px Arial;顏色:#fff;}
 #demo{左：50%；上：50%；左邊距：-512px；上邊距：-384px；寬度：1024px；高度：768px；}
 #demo img{border-radius:8px;border:5pxsolid #555;}
 .back{字體大小：18px;行高：130%;填入：8px 20px;顏色：#fff;}
 #back-home{左：0px;上：0px;背景：#35916D;}
 #back-article{右：0px;上：0px;背景：#444;}
 #back-download{右:0px;底部:0px;背景:#CE565D;}

HTML

複製程式碼程式碼如下：

js

複製程式碼程式碼如下：

$(函數(){
    $(document.body).attr({
      'onSelectStart' :'回傳 false;',
      'oncontextmenu':'返回 false;',
      'onbeforecopy':'回傳 false;',
      'oncopy':'回傳 false;',
      'ondragstart':'回傳 false;',
      '風格'：'-moz-使用者選擇：無；-khtml-使用者選擇：無；使用者選擇：無；'
    });
 var Preload=函數(映像,回呼){
  var 完成=0,val=0;
  var count=images.length; 
  var preload=函數(url) {
   var image = $("").attr("src", url).on("load",function () {
    完成();
   });
   };
  var Complete=function() {
   完成；
   val=完成/計數*100;
   $('#loading span').text(Math.ceil(val) "%");
   if(完成==計數){
    回調();
   }
  };
  for(var i=0;i    預先載入（圖片[i]）；
  }
 };
 var 圖片=[
   '拖曳/shiwai ceshi0006.jpg',
   '拖曳/shiwai ceshi0012.jpg',
   '拖曳/shiwai ceshi0018.jpg',
   '拖曳/shiwai ceshi0024.jpg',
   '拖曳/shiwai ceshi0030.jpg',
   '拖曳/shiwai ceshi0036.jpg',
   '拖曳/shiwai ceshi0042.jpg',
   '拖曳/shiwai ceshi0048.jpg',
   '拖曳/shiwai ceshi0054.jpg',
   '拖曳/shiwai ceshi0060.jpg',
   '拖曳/shiwai ceshi0066.jpg',
   '拖曳/shiwai ceshi0072.jpg',
   '拖曳/shiwai ceshi0078.jpg',
   '拖曳/shiwai ceshi0084.jpg',
   '拖曳/shiwai ceshi0090.jpg',
   '拖曳/shiwai ceshi0096.jpg',
   '拖曳/shiwai ceshi0102.jpg',
   '拖曳/shiwai ceshi0108.jpg',
   '拖曳/shiwai ceshi0114.jpg',
   '拖曳/shiwai ceshi0120.jpg',
   '拖曳/shiwai ceshi0126.jpg',
   '拖曳/shiwai ceshi0132.jpg',
   '拖曳/shiwai ceshi0138.jpg',
   '拖曳/shiwai ceshi0144.jpg',
   '拖曳/shiwai ceshi0150.jpg',
   '拖曳/shiwai ceshi0156.jpg',
   '拖曳/shiwai ceshi0162.jpg',
   '拖曳/shiwai ceshi0168.jpg',
   '拖曳/shiwai ceshi0174.jpg',
   '拖曳/shiwai ceshi0180.jpg',
   '拖曳/shiwai ceshi0186.jpg',
   '拖曳/shiwai ceshi0192.jpg',
   '拖曳/shiwai ceshi0198.jpg',
   '拖曳/shiwai ceshi0204.jpg',
   '拖曳/shiwai ceshi0210.jpg',
   '拖曳/shiwai ceshi0216.jpg',
   '拖曳/shiwai ceshi0222.jpg',
   '拖曳/shiwai ceshi0228.jpg',
   '拖曳/shiwai ceshi0234.jpg',
   '拖曳/shiwai ceshi0240.jpg',
   '拖曳/shiwai ceshi0246.jpg',
   '拖曳/shiwai ceshi0252.jpg',
   '拖曳/shiwai ceshi0258.jpg',
   '拖曳/shiwai ceshi0264.jpg',
   '拖曳/shiwai ceshi0270.jpg',
   '拖曳/shiwai ceshi0276.jpg',
   '拖曳/shiwai ceshi0282.jpg',
   '拖曳/shiwai ceshi0288.jpg',
   '拖曳/shiwai ceshi0294.jpg',
   '拖曳/shiwai ceshi0300.jpg',
   '拖曳/shiwai ceshi0306.jpg',
   '拖曳/shiwai ceshi0312.jpg',
   '拖曳/shiwai ceshi0318.jpg',
   '拖曳/shiwai ceshi0324.jpg',
   '拖曳/shiwai ceshi0330.jpg',
   '拖曳/shiwai ceshi0336.jpg',
   '拖曳/shiwai ceshi0342.jpg',
   '拖曳/shiwai ceshi0348.jpg',
   '拖曳/shiwai ceshi0354.jpg',
   '拖曳/shiwai ceshi0360.jpg',
 ];
 預先載入（影像，函數（）{
  $("#loading").fadeOut();
  $("#demo img").attr("src",images[0]);
  $("#demo").fadeIn();
  $("#demo img").drag360(images);
 });

});
腳本>

drag.js

複製程式碼 程式碼如下:

（函數（$）{
    $.fn.drag360=函數（圖）{
        var mdx,mmx,isDrag=false,unitStep=40,current=0;
        var that=$(this);
        var length=images.length;
        // 觸碰
        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;
            if(isDrag){
                if(Math.abs(mmx-mdx)>unitStep){
                    if(mmx-mdx>0){
                       且目前=目前1;
                    }其他{
                       且目前=目前-1;
                    }
                    mdx=mmx;
                    if(目前                     if(目前>長度-1)目前=0;
                    that.attr("src",images[目前]);
                }
            }
        }).on('touchend',function(e){
            isDrag=false;
        });
        //拖曳
        that.on('mousedown',function(e){
            mdx=e.pageX;
            isDrag=true;
        }).on('mousemove',function(e){
            mmx=e.pageX;
            if(isDrag){
                if(Math.abs(mmx-mdx)>unitStep){
                    而目前=目前(mmx-mdx>0?1:-1);
                    mdx=mmx;
                    if(目前                     if(目前>長度-1)目前=0;
                    that.attr("src",images[目前]);
                }
            }
            回復錯誤；
        })
        $(document).on('mouseup',function(e){
            isDrag=false;
        });
        $(document).on('mouseleave',function(e){
            isDrag=false;
        });
        return this;
    };
})(jQuery);

以上所述就是本文的全部內容了，希望大家能夠喜歡。