JavaScript 슬립메뉴

http://kisboard.com

http://woost.co.kr/~jein0/slip_menu/slip_menu.html



플래시로 이런 기능이 만들어 진 사이트를 보고 플래시를 몰라서 자바스크립으로 한번 같은 기능을 만들어 봤습니다.
참조 페이지는 링크에 걸려있습니다.

즐거운 하루 되시기 바랍니다.

<script language='javascript'>
var banner_height = 200; //보여질 배너의 높이
var banner_total_count = 5; //보여질 배너의 갯수
var slip_speed = 10; // 미그러져 갈때의 건너 뛰는 픽셀 수

//------------------------ 레이어 내리기 ----------------------------------
function down(menu_value, flow_loop)
{
    menu_name = 'menu_image['+menu_value+']';
    menu = document.all[menu_name];
    if(flow_loop < banner_height - 1)
    {
        if(flow_loop <= banner_height - 35)
        {
            menu.style.posTop = menu.style.posTop + slip_speed;
            flow_loop = flow_loop*1 + slip_speed;
            setTimeout("down('" + menu_value + "','" + flow_loop + "')", 10);
        }
        else
        {
            menu.style.posTop = menu.style.posTop + 1;
            flow_loop = flow_loop*1 + 1;
            setTimeout("down('" + menu_value + "','" + flow_loop + "')", 10);
        }
    }
}

//------------------------ 레이어 올리기 ----------------------------------
function up(menu_value, flow_loop)
{
    menu_name = 'menu_image['+menu_value+']';
    menu = document.all[menu_name];
    if(flow_loop < banner_height - 1)
    {
        if(flow_loop <= banner_height - 35)
        {
            menu.style.posTop = menu.style.posTop - slip_speed;
            flow_loop = flow_loop*1 + slip_speed;
            setTimeout("up('" + menu_value + "','" + flow_loop + "')", 10);
        }
        else
        {
            menu.style.posTop = menu.style.posTop - 1;
            flow_loop = flow_loop*1 + 1;
            setTimeout("up('" + menu_value + "','" + flow_loop + "')", 10);
        }
    }
}

//------------------------ 보여줄 레이어 선택하기 -------------------------
function show(menu_value)
{
    menu_name = 'menu_image['+menu_value+']';
    menu = document.all[menu_name];

    if(menu.style.pos == 0 && menu_value < banner_total_count - 1)
    {
        for(var i=1; i < banner_total_count - menu_value*1; i++)
        {
            change_menu_value = menu_value*1 + i;
            change_menu_name = 'menu_image['+change_menu_value+']';
            change_menu = document.all[change_menu_name];

            if(change_menu.style.pos == 0)
            {
                down(menu_value*1+i, 0);
                change_menu.style.pos = 1;
            }
        }
    }
    else
    {
        for(var i=1; i < banner_total_count; i++)
        {
            change_menu_value = i;
            change_menu_name = 'menu_image['+change_menu_value+']';
            change_menu = document.all[change_menu_name];

            if(change_menu.style.pos == 1 && change_menu_value <= menu_value)
            {
                up(change_menu_value, 0);
                change_menu.style.pos = 0;
            }
        }
    }
}
</script>

<center>
<br>
<br>
<br>
<br>
<br>
<table border=0 cellpadding=0 cellspacing=0>
    <tr>
        <td align=center>
<DIV STYLE="width:250; height:350; overflow:hidden;  margin-left:0px;">

<div border=0 id='menu_image[0]' height=30 style='position:relative;width:250;pos:0;'><img src=./img/menu.gif width=250 height=30 OnMouseOver="javascript:show(0);"><img src=./img/image1.gif width=250></div>

<div border=0 id='menu_image[1]' height=30 style='position:relative;width:250;top:-200;pos:0;'><img src=./img/menu.gif width=250 height=30 OnMouseOver="javascript:show(1);"><img src=./img/image2.gif width=250></div>

<div border=0 id='menu_image[2]' height=30 style='position:relative;width:250;top:-400;pos:0;'><img src=./img/menu.gif width=250 height=30 OnMouseOver="javascript:show(2);"><img src=./img/image3.gif width=250></div>

<div border=0 id='menu_image[3]' height=30 style='position:relative;width:250;top:-600;pos:0;'><img src=./img/menu.gif width=250 height=30 OnMouseOver="javascript:show(3);"><img src=./img/image4.gif width=250></div>

<div border=0 id='menu_image[4]' height=30 style='position:relative;width:250;top:-800;pos:0;'><img src=./img/menu.gif width=250 height=30 OnMouseOver="javascript:show(4);"><img src=./img/image5.gif width=250></div>

</DIV>
        </td>
    </tr>
</table>
</center>