메인메뉴 바로가기

HOME으로 가기


Javascript

사용자함수 | Object 3D (드래그이벤트를 사용한 이미지 변환)

본문

var Drag={

    x : null,
    
    nowImage : null,
    total : 9, //이미지 수
    speed : 10, // 높을수록 드래그 느림.
    no : 1,
    frame : 0,
    tempNo : 0,
    imgs : null,
    interval : null,
    autoChk : null,
    
    init : function(){
        Drag.imgs = [];
        //이미지버퍼 프리로드
        for(var i=1; i <= Drag.total; i++){
            Drag.imgs[i] =     new Image;
            Drag.imgs[i].src = "../images/e5_so_21_02_image05_0"+i+".jpg";
        }
        
    },
    
    swaping : function(x){
        
        Drag.frame = x - Drag.x;
        Drag.tempNo = (Drag.no + Drag.frame); 
        
        if(Drag.tempNo<1) {
            Drag.no = Drag.tempNo = Drag.total;
            Drag.x = x;
        }else if (Drag.tempNo>Drag.total) {
            Drag.no = Drag.tempNo = 1;
            Drag.x = x;
        }
        
        console.log("x:"+x+" - Drag.x: "+Drag.x+" = Drag.tempNo: "+Drag.tempNo);
            
        $(Drag.nowImage).attr("src",Drag.imgs[Drag.tempNo].src);
        
    },
    popup : function(){
        if(Popup.popupID != null) {
            $("#"+Popup.popupID+" a.btn_close").click();
        }
        $("#pop_p2_2").show();    
    },
    auto : function(m){
        if(m){
            Drag.tempNo = Drag.no;
            Drag.interval = setInterval(function(){
            
                Drag.tempNo++;
                if(Drag.tempNo>Drag.total)     Drag.tempNo = 1;
                 $("#obg3d_img").attr("src",Drag.imgs[Drag.tempNo].src);
                Drag.no = Drag.tempNo;
                
            },200);
            
            $(".btn_autodrag>img").attr("src","../images/btn_autodrag_on.png"); //체크버튼켜기
            Drag.autoChk = 1; //체크유무 값
            
        }else{
            
            clearInterval(Drag.interval);
            Drag.interval = null;
            
            $(".btn_autodrag>img").attr("src","../images/btn_autodrag_off.png"); //체크버튼끄기
            Drag.autoChk = 0; //체크유무 값
        }
    },
    autoTogle : function(){
        Drag.auto( (++Drag.autoChk)%2 );
    }
    
};
    
//=======================------------------------------------ 드래그 핸들러
$("document").ready(function(){
    if($("#obg3d_img").length > 0 ){
        var Obg3d = $("#obg3d_img");
        //페이지드래그 핸들러
        $(Obg3d).parent().mousedown(function(){
            Drag.auto();
            Drag.nowImage = $(this).find("img");
            Drag.x = Math.floor(window.event.x/Drag.speed);
            this.onmousemove = function(){
                console.log(Math.floor(window.event.x/Drag.speed));
                Drag.swaping(Math.floor(window.event.x/Drag.speed));
            }
        });
        $(Obg3d).parent().mouseup(function(){
                this.onmousemove = null;
                Drag.no = Drag.tempNo;
        });
        $(Obg3d).parent().mouseout(function(){
                this.onmousemove = null;
                Drag.no = Drag.tempNo;
                
        });
        if(Drag.imgs == null) Drag.init(); //페이지이미지 프리로드
        Drag.auto(1);
    }
    
});
 
 
----------------------------------- HTML ------------------------------------
 
<a href="#" onclick="Drag.autoTogle(); return false;" class="btn_autodrag">
    <img src="../images/btn_autodrag_on.png" alt="자동 3D회전" />
</a>
 
<a id="picture3" href="../images/e5_so_21_02_image05.jpg" title="청자 사자장식 부분 " onclick="return false;"> 
    <img id="obg3d_img" src="../images/e5_so_21_02_image05_01.jpg" alt="청자 사자장식 부분 " class="img_thumbnail3" />
</a> 
 
---------------------------- images ----------------------------
 
../images/e5_so_21_02_image05_01.jpg
../images/e5_so_21_02_image05_01.jpg
../images/e5_so_21_02_image05_03.jpg
../images/e5_so_21_02_image05_04.jpg
../images/e5_so_21_02_image05_05.jpg
../images/e5_so_21_02_image05_06.jpg
../images/e5_so_21_02_image05_07.jpg
../images/e5_so_21_02_image05_08.jpg

../images/e5_so_21_02_image05_09.jpg 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기