[JAVASCRIPT]
jQuery(document).ready(function(){
//대상 설정
var slideArea = $("#mousearea"),
slideDiv = slideArea.siblings("div.slidebox"),
slideNumber = slideDiv.size(),
mouseImg = $("#mouse_img"),
//설정 - 이벤트 드래그 이동량
dragSize = 100,
//기본값
slideCount = 1,
mDown = false;
//마우스 좌클릭 확인
slideArea.mousedown(function(event){
mDown = true;
dragX = event.pageX;
slideArea.addClass("grab");
});
slideArea.mouseup(function(){
mDown = false;
slideArea.removeClass("grab");
});
//마우스 드래그 확인
slideArea.mousemove(function(event){
//마우스가 좌클릭 상태로 마우스를 'dragSize' 이상 이동시
if(mDown == true && dragX + dragSize < event.pageX){
//기준점 재정의
dragX = event.pageX;
if(slideCount < slideNumber){
add_remove_class(); //슬라이드 배경 비활성화, 활성화
slideCount ++;
}else{
slideCount = 0;
add_remove_class();
slideCount ++;
}
}
if(mDown == true && dragX - dragSize > event.pageX){
dragX = event.pageX;
if(0 < slideCount && slideCount){
slideCount --;
add_remove_class();
}else{
slideCount = slideNumber - 1;
add_remove_class();
}
}
});
//슬라이드 배경 비활성화, 활성화
function add_remove_class(){
slideDiv.removeClass("active");
slideDiv.eq(slideCount).addClass("active");
}
//슬라이드 안에서의 마우스를 따라다니는 레이어
slideArea.mousemove(function(event){
//파이어폭스에선 offsetX, offsetY을 찾을수 없음
var firefoxCoordiX = event.pageX - $(event.target).offset().left;
var firefoxCoordiY = event.pageY - $(event.target).offset().top;
var coordiX = event.offsetX === undefined ? firefoxCoordiX : event.offsetX;
var coordiY = event.offsetY === undefined ? firefoxCoordiY : event.offsetY;
mouseImg.fadeIn("fast");
mouseImg.css({"left" : coordiX, "top" : coordiY});
});
});