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

반응형