간단한 웹 메모 서비스 AFOUR
2018-04-26
jQuery로 마우스를 따라다니는 레이어와 드래그 슬라이더 만들기
2014-03-26
Explanation
jQuery를 이용한 마우스를 따라다니는 레이어와 드래그하여 변하는 이미지 슬라이더.
예제 링크 : https://falsy.me/preview/dragslider/dragslider.html
소스 보기
|
1 2 3 4 5 6 7 8 9 10 |
[HTML] <div id="dragslide"> <div id="mousearea"></div> <div id="slide1" class="slidebox active"></div> <div id="slide2" class="slidebox"></div> <div id="slide3" class="slidebox"></div> <div id="slide4" class="slidebox"></div> <div id="mouse_img"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
[CSS] #dragslide { position: relative; width: 500px; height: 500px; } #mousearea { position: absolute; width: 100%; height: 100%; z-index: 100; cursor: move; cursor: grab; cursor: -webkit-grab; cursor: -moz-grab; } #mousearea.grab { cursor: move; cursor: grabbing; cursor: -webkit-grabbing; cursor: -moz-grabbing; } #mouse_img { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(./arrow.png) center center no-repeat; } #dragslide > div.slidebox { width: 500px; height: 500px; display: none; } #dragslide > div.slidebox.active { display: block; } /* 슬라이드 될 이미지들 */ #slide1 { background: #63c2d4; } #slide2 { background: #57d0b8; } #slide3 { background: #e09cf3; } #slide4 { background: #d3b969; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
[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}); }); }); |
