[제이쿼리(jQuery) UI] 마우스휠이벤트 2. 마우스휠 이벤트를 이용한 UI를 만들어 보자!
마크업 부터 시작하는 UI/마우스 휠 사용한 UI 2015. 9. 21. 00:31
728x90
반응형
앞에서 했던 이론이 이해가 되셨다면
이제 UI를 만드는건 아주 쉽겟죠?
음수값(마우스를 내릴때)과 양수값(마우스를 올릴때)
을 조건식으로 걸어주면 브라우저 이벤트객체 이슈를 고려한 UI 를 만들 수 있겠죠!
더해서 jQuery 플러그 인 중에 Scroll Lock 를 적절하게 응용한다면
재밌는 UI를 만드리라 생각합니다!
자 일단 이전글에 있던 마크업을 미리 복사해 줍니다. ㅋㅋ;;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <style></style> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ $("html, body").on('mousewheel DOMMouseScroll', function(e) { var E = e.originalEvent; delta = 0; if (E.detail) { delta = E.detail * -40; }else{ delta = E.wheelDelta; }; }); }); </script> </head> <body> </body> </html> | cs |
이제 body 안에
간단하게 ul, li 태그를 사용하여 몇가지 작성해 보도록 합니다.
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;list-style-type: none;} .clearfix{*zoom: 1;} .clearfix:after{content: '';display: block;clear: both;} div{position: relative;width: 1000px;height: 200px;margin: 0 auto;overflow: hidden;} ul{position: absolute;left: 0;top: 0;width: 3000px;} ul li{width: 1000px;height: 200px;float: left;} .box1{background-color: #b3c4f8;} .box2{background-color: #f8bfb4;} .box3{background-color: #b4f8b6;} </style> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ $("html, body").on('mousewheel DOMMouseScroll', function(e) { var E = e.originalEvent; delta = 0; if (E.detail) { delta = E.detail * -40; }else{ delta = E.wheelDelta; }; }); }); </script> </head> <body> <div> <ul class="clearfix"> <li class="box1"></li> <li class="box2"></li> <li class="box3"></li> </ul> </div> </body> </html> | cs |
이런식으로??
div 의 크기는 현재 보여줄 li 의 크기만큼
ul 의 크기는 li 의 갯수 곱하기 li의 width 값 만큼.( 이 부분은 스크립트로 처리하는게 범용성이 뛰어나겠죠? )
자..
스크립트를 작성해 봅니다.
스크립트는 자꾸자꾸 스스로 시도해 보면서 시행착오를 겪어봅시다.
시행 착오를 직접 겪는것과 안겪는것은 큰 차이가 있습니다!
정말로요..
이 예제는 별거 아니지만...ㅠㅠ;; 저는 헤맸어요..;;
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
iframe 에 스크롤 이 생겨서 휠 이벤트 를 보여주기 힘드네요 ㅎㅎ;
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;list-style-type: none;} .clearfix{*zoom: 1;} .clearfix:after{content: '';display: block;clear: both;} div{position: relative;width: 1000px;height: 200px;margin: 0 auto;overflow: hidden;} ul{position: absolute;left: 0;top: 0;width: 3000px;} ul li{width: 1000px;height: 200px;float: left;} .box1{background-color: #b3c4f8;} .box2{background-color: #f8bfb4;} .box3{background-color: #b4f8b6;} </style> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ var d = false; $("html, body").on('mousewheel DOMMouseScroll', function(e) { var E = e.originalEvent; delta = 0; if (E.detail) { delta = E.detail * -40; }else{ delta = E.wheelDelta; }; var a = parseInt($("ul").css("left")); var b = $("li").width(); var c = $('li').length; if(delta < 0 && a > (c-1)*-b && !d){ // 마우스 휠을 아래로 내렸을 경우 d = true; $('ul').stop().animate({ "left": a += -b },400,function(){ d = false; }); }; if(delta > 0 && a < 0 && !d){ // 마우스 휠을 위로 올렸을 경우 d = true; $('ul').stop().animate({ "left": a += b },400,function(){ d = false; }); }; }); }); </script> </head> <body> <div> <ul class="clearfix"> <li class="box1"></li> <li class="box2"></li> <li class="box3"></li> </ul> </div> </body> </html> | cs |
이걸 참고 하셔서 UI 를 만들어 보셔요 위의것과 동일합니다.
반응형
'마크업 부터 시작하는 UI > 마우스 휠 사용한 UI' 카테고리의 다른 글
| [제이쿼리(jQuery) UI] 마우스휠이벤트 1. 마우스 휠 이벤트 를 알아보자. (25) | 2015.09.20 |
|---|