사용자함수 | 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 = [];
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;
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; //체크유무 값
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 );
}
};
},
autoTogle : function(){
Drag.auto( (++Drag.autoChk)%2 );
}
};
//=======================------------------------------------ 드래그 핸들러
$("document").ready(function(){
if($("#obg3d_img").length > 0 ){
var Obg3d = $("#obg3d_img");
//페이지드래그 핸들러
$(Obg3d).parent().mousedown(function(){
$(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));
}
});
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;
});
this.onmousemove = null;
Drag.no = Drag.tempNo;
});
$(Obg3d).parent().mouseout(function(){
this.onmousemove = null;
Drag.no = Drag.tempNo;
});
this.onmousemove = null;
Drag.no = Drag.tempNo;
});
if(Drag.imgs == null) Drag.init(); //페이지이미지 프리로드
Drag.auto(1);
Drag.auto(1);
}
});
});
----------------------------------- HTML ------------------------------------
<a href="#" onclick="Drag.autoTogle(); return false;" class="btn_autodrag">
<img src="../images/btn_autodrag_on.png" alt="자동 3D회전" />
</a>
<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>
<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