moveDiv

简单的moveDiv

body 部分

 

 

 

 

<div id="nav">
    <a href="#" id="menu">click me</a>
    <div id="three" style="width:100px; height:100px; background-color:#009966; margin-top:10px;">
    
    </div>
    sdfasdf
    <div id="naver">
        <span id="closeId">close</span>
    </div>
</div>

 

javascript 部分

 

window.onload=initAll;
function initAll(){
    var menu=document.getElementById("menu");
    var naver=document.getElementById("naver");
    var closeId=document.getElementById("closeId");
    menu.onclick=function(){
        if(naver.style.display=="none"){
            naver.style.display="block";
            moveElement("naver",200,5);
        }else{
            naver.style.display="none";
            naver.style.height="0px";
        }
    }
    closeId.onclick=function(){
        naver.style.height="0px";
        naver.style.display="none";
    }
}
function moveElement(elementId,theHeight,interval){
    var elem=document.getElementById(elementId);
    if(elem.movement){
        clearTimeout(elem.movement);
    }
    if(!elem.style.height){
        elem.style.height="0px";
    }
    var hpos=parseInt(elem.style.height);
    if(hpos==theHeight){
        return true;
    }
    if(hpos<theHeight){
        var dist=Math.ceil((theHeight-hpos)/5);
        hpos=hpos+dist;
    }
    if(hpos>theHeight){
        var dist=Math.ceil((hpos-theHeight)/5);
        hpos=hpos=dist;
    }
    elem.style.height=hpos+"px";
    var repeat="moveElement('"+elementId+"',"+theHeight+","+interval+")";
    elem.movement=setTimeout(repeat,interval);
};

 

css 部分

 

 

*{
    margin:0px;
    padding:0px;
}
#nav{
    width:500px;
    height:500px;
    margin-top:50px;
    margin-left:150px;
    border:1px solid red;
    position:relative;
}
#menu{
    width:100px;
    height:30px;
    line-height:30px;
    display:block;
    font-size:16px;
    color:#fff;
    background-color:#00FF99;
    text-align:center;
    text-decoration:none;
}
#naver{
    width:200px;
    background-color:#006699;
    display:none;
    position:absolute;
    left:0px;
    top:40px;
}
#naver span{
    float:right;
    width:50px;
    height:30px;
    line-height:30px;
    display:block;
    font-size:16px;
    background-color:#00FFCC;
    color:#fff;
    cursor:pointer;
}