jQuery는 360° 파노라마 드래그를 실현합니다.

CSS

复主代码 代码如下:

html,body{배경:#333;}
 #로드 중{왼쪽:0;위:0;너비:100%;높이:100%;배경:#333;색상:#fff;}
 #로드 범위{left:45%;top:40%;font:normal 50px Arial;color:#fff;}
 #demo{왼쪽:50%;top:50%;margin-left:-512px;margin-top:-384px;width:1024px;height:768px;}
 #demo img{border-radius:8px;border:5px solid #555;}
 .back{글꼴 크기:18px;줄 높이:130%;패딩:8px 20px;색상:#fff;}
 #집으로 돌아가기{왼쪽:0px;상단:0px;배경:#35916D;}
 #뒤기사{오른쪽:0px;top:0px;배경:#444;}
 #다시 다운로드{오른쪽:0px;하단:0px;배경:#CE565D;}

HTML

复主代码 代码如下:

js

复主代码 代码如下:

$(함수(){
    $(document.body).attr({
      'onSelectStart':'false를 반환합니다;',
      'oncontextmenu':'false를 반환합니다;',
      'onbeforecopy':'false를 반환합니다;',
      'oncopy':'false를 반환합니다;',
      'ondragstart':'false 반환;',
      '스타일':'-moz-user-select:없음; -khtml-사용자 선택: 없음; 사용자 선택: 없음;'
    });
 var 사전 로드=함수(이미지,콜백){
  var 완료=0,val=0;
  var 개수=images.length; 
  var preload=function(url) {
   var image = $("").attr("src", url).on("load",function () {
    완료();
   });
   };
  var 완료=함수() {
   완료 ;
   val=완료/횟수*100;
   $('#loading 범위').text(Math.ceil(val) "%");
   if(완료==개수){
    콜백();
   }
  };
  for(var i=0;i    미리 로드(이미지[i]);
  }
 };
 var 이미지=[
   '드래그/shiwaiceshi0006.jpg',
   '드래그/shiwaiceshi0012.jpg',
   '드래그/shiwaiceshi0018.jpg',
   '드래그/shiwaiceshi0024.jpg',
   '드래그/shiwaiceshi0030.jpg',
   '드래그/shiwaiceshi0036.jpg',
   '드래그/shiwaiceshi0042.jpg',
   '드래그/shiwaiceshi0048.jpg',
   '드래그/shiwaiceshi0054.jpg',
   '드래그/shiwaiceshi0060.jpg',
   '드래그/shiwaiceshi0066.jpg',
   '드래그/shiwaiceshi0072.jpg',
   '드래그/shiwaiceshi0078.jpg',
   '드래그/shiwaiceshi0084.jpg',
   '드래그/shiwaiceshi0090.jpg',
   '드래그/shiwaiceshi0096.jpg',
   '드래그/shiwaiceshi0102.jpg',
   '드래그/shiwaiceshi0108.jpg',
   '드래그/shiwaiceshi0114.jpg',
   '드래그/shiwaiceshi0120.jpg',
   '드래그/shiwaiceshi0126.jpg',
   '드래그/shiwaiceshi0132.jpg',
   '드래그/shiwaiceshi0138.jpg',
   '드래그/shiwaiceshi0144.jpg',
   '드래그/shiwaiceshi0150.jpg',
   '드래그/shiwaiceshi0156.jpg',
   '드래그/shiwaiceshi0162.jpg',
   '드래그/shiwaiceshi0168.jpg',
   '드래그/shiwaiceshi0174.jpg',
   '드래그/shiwaiceshi0180.jpg',
   '드래그/shiwaiceshi0186.jpg',
   '드래그/shiwaiceshi0192.jpg',
   '드래그/shiwaiceshi0198.jpg',
   '드래그/shiwaiceshi0204.jpg',
   '드래그/shiwaiceshi0210.jpg',
   '드래그/shiwaiceshi0216.jpg',
   '드래그/shiwaiceshi0222.jpg',
   '드래그/shiwaiceshi0228.jpg',
   '드래그/shiwaiceshi0234.jpg',
   '드래그/shiwaiceshi0240.jpg',
   '드래그/shiwaiceshi0246.jpg',
   '드래그/shiwaiceshi0252.jpg',
   '드래그/shiwaiceshi0258.jpg',
   '드래그/shiwaiceshi0264.jpg',
   '드래그/shiwaiceshi0270.jpg',
   '드래그/shiwaiceshi0276.jpg',
   '드래그/shiwaiceshi0282.jpg',
   '드래그/shiwaiceshi0288.jpg',
   '드래그/shiwaiceshi0294.jpg',
   '드래그/shiwaiceshi0300.jpg',
   '드래그/shiwaiceshi0306.jpg',
   '드래그/shiwaiceshi0312.jpg',
   '드래그/shiwaiceshi0318.jpg',
   '드래그/shiwaiceshi0324.jpg',
   '드래그/shiwaiceshi0330.jpg',
   '드래그/shiwaiceshi0336.jpg',
   '드래그/shiwaiceshi0342.jpg',
   '드래그/shiwaiceshi0348.jpg',
   '드래그/shiwaiceshi0354.jpg',
   '드래그/shiwaiceshi0360.jpg',
 ];
 미리 로드(이미지,함수(){
  $("#loading").fadeOut();
  $("#demo img").attr("src",images[0]);
  $("#demo").fadeIn();
  $("#demo img").drag360(이미지);
 });

});

drag.js

코드 복사 코드는 다음과 같습니다.

(함수($){
    $.fn.drag360=기능(이미지){
        var mdx,mmx,isDrag=false,unitStep=40,current=0;
        var that=$(this);
        var 길이=images.length;
        //触摸 
        that.on('touchstart',function(e){
            var touch = e.originalEvent;
                mdx = touch.changedTouches[0].pageX;
                isDrag=true;
        }).on('touchmove',function(e){
            e.preventDefault();
            터치 = 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[현재]);
                }
            }
            false를 반환합니다.
        })
         $(document).on('mouseup',function(e){
               isDrag=false;
        });
          $(document).on('mouseleave',function(e){
               isDrag=false;
        });
         이것을 돌려주세요;
};
})(jQuery);

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.