[제이쿼리(jQuery) UI] 마우스휠이벤트 2. 마우스휠 이벤트를 이용한 UI를 만들어 보자!

마크업 부터 시작하는 UI/마우스 휠 사용한 UI 2015.09.21 00:31

앞에서 했던 이론이 이해가 되셨다면

이제 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 를 만들어 보셔요 위의것과 동일합니다.

댓글 9

  • ejha (2016.06.14 10:54 신고)

    엄청 알고싶었던 부분인데 정말 유익합니다ㅠ.

    • 회복맨 (2016.06.14 11:03 신고)

      ㅎㅎ 감사합니다. 댓글 남겨 주시니 보람있네요!
      자주 방문해 주세요!

  • 다락방 (2016.11.09 14:14 신고)

    좋은정보감사합니다~~~~

  • 승용 (2016.11.13 03:25 신고)

    안녕하세요! 초보 개발자인데요 에디터 하나 추천해주시겠어요?

    에이트플러스3 쓰고있는데 가볍긴한데 좀 부실해서요.. 좋긴하지만

    브라켓은 좀 무거운 것 같아서요 하나만 추천해주세요!

    • 회복맨 (2016.11.13 04:56 신고)

      안녕하세요 방문해 주셔서 감사합니다. :)
      승용님의 블로그를 방문해 봤습니다.
      PHP와 Node js 에 대한 글을 보고 역시 관심분야의 에디터를 사용 하는게 좋을듯 한 기분이 들었습니다.

      제트브래인 에서 만든 에디터인
      웹스톰과 PHP스톰을 추천드립니다.

      웹스톰은 자바스크립트 IDE 이며,
      PHP스톰은 PHP IDE 입니다.
      둘 중 사용법 한개만 알아도 둘 다 사용하실 수 있을듯 합니다.

      저는 퍼블리셔 입니다.
      제 기준으로는 서브라임텍스트가 제 입맛이라서 좋아하는 편입니다.

  • 승용 (2016.11.13 11:05 신고)

    답급 감사합니다 자주 놀러오겠습니다.^^

  • ysunny (2017.03.13 15:06 신고)

    line 22 앞에

    e.preventDefault():를 넣어주세요...