본문 바로가기

프로그래밍/Javascript

슬라이딩


<script language='javascript'>
<!--
var sd;
var hi  = 30;
var min = 30;
var max = 150;

window.onload = function()
{
    sd  = document.getElementById('slide');
    sd.style.top = document.body.clientHeight - hi;
}
 
function fncHeight(obj)
{
    return document.body.clientHeight;
}
 
var up;
var dn;

function fncUp()
{
    clearTimeout(dn);
    var obj = document.getElementById('btn');
    obj.onclick = fncDown;

    if(hi<max)
    {
        hi += 5;
        sd.style.top    = document.body.clientHeight - hi;
        sd.style.height = hi;
        up = setTimeout(fncUp,10);
    }
    else
    {
        obj.innerHTML = '▼';
    }
}

function fncDown()
{
    clearTimeout(up);
    var obj = document.getElementById('btn');
    obj.onclick = fncUp;
 
    if(hi>min)
    {
        hi -= 5;
        sd.style.top    = document.body.clientHeight - hi;
        sd.style.height = hi;
        dn = setTimeout(fncDown,10);
    }
    else
    {
        obj.innerHTML = '▲';
    }
}
//-->
</script>
 
<div id='slide' style='position:absolute; background-color:red; top:100px; left:0px; width:100%; height:30; text-align:center;'>
 <span id='btn' style='cursor:hand;' onclick='fncUp();'>test</span>
</div>