개발

[jquery] 퀵메뉴

지승준 2014. 6. 11. 21:44
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
<script type="text/javascript">
 
    var xPosition = 0;  // 가로 위치 값
    var yPosition = 0;   // 세로 위치 값
    var yStartPosition = 0;  // 퀵메뉴 시작 위치
    var Ygravity = 0.70;  // B타입인 경우 움직임 속도
    var scrollPosition = 0;   // 현재 스크롤의 세로 위치값
    var Y_B = 0;
    var Y_A = 0;
    var quickmenu;      // 퀵메뉴 엘리먼트
    var quickType = "B";  // 퀵메뉴 타입 (A:귀여운타입, B:일반)
    var quickmenuTop = 100;   // 퀵메뉴 엘리먼트의 TOP 위치 
 
    function quickMenu() {
        quickmenu = $("#aside > .line");    //퀵메뉴의 id
        scrollPosition = $(window).scrollTop();
        Y_B = parseInt(yStartPosition + scrollPosition);
        quickmenuTop = quickmenu.height();
 
        // ---[A TYPE]--------------------------------------------------------------
        if (quickType == "A") {
            if (parseInt(quickmenu.height()) < Y_B - 1) {
                yPosition += 2;
            } else if (parseInt(quickmenu.height()) > Y_B + 1) {
                yPosition -= 2;
            }
            yPosition *= Ygravity;
            quickmenu.height(parseInt(quickmenuTop + yPosition) + "px" );
        // ---[B TYPE]--------------------------------------------------------------  
        } else {
            Y_A = parseInt(quickmenuTop, 10);
            if (Y_A != Y_B) {
                yOffset = Math.ceil(Math.abs(Y_B - Y_A) / 20);
                if (Y_B < Y_A) yOffset = -yOffset;
                quickmenu.height(parseInt(quickmenuTop, 10) + yOffset + "px");
            }
        }
        // -------------------------------------------------------------------------
    }
 
    $(document).ready(function(e) {
        window.setInterval("quickMenu()"1);
    });
 
    function scrollLink(obj) {
 
        var position = $("#menu" + obj, parent.frames[""].document ).offset();
        $('html, body').animate({ scrollTop: position.top }, 1000);
 
        for (var i = 1 ; i < 6; i++){
            $("#btn" + i).attr("class""");
        }
 
        $("#btn" + obj).attr("class""on");
 
    }
 
</script>
cs