帮下

Question

我想实现一个div里面的上下分别有向上和向下的按钮，当我点击向上或是向下的时候div里面的内容向上或者向下移动。可以的话写段代码给我参考一下。本人是新手。

Answer 1

<script type="text/javascript">
/*
    t:滚动的方向:up表示向上滚动,down表示向下滚动
    id:层的id
    b:a每次的移动量
    c:a移动的速度,毫秒为单位
*/
function slideUp(t,id,b,c){
    var a=document.getElementById(id);
    var o=a.getElementsByTagName("span")[0];
    var isStop=false;
    switch(t){
        case 'up':
            if(parseInt(o.style.top)<-parseInt(o.clientHeight)){
                isStop=true;
            }
            break;
        case 'down':
            if(parseInt(o.style.top)>parseInt(a.style.height)){
                isStop=true;
            }
            break;
        
    }
    if(isStop){alert('停止滚动了');return}
    o.style.top=t=='up'?(parseInt(o.style.top)-parseInt(b))+"px":(parseInt(o.style.top)+parseInt(b))+"px";
    setTimeout(function (){slideUp(t,id,b,c)},c)
}</script>
<div id="slide_div" style="position:relative;width:200px;height:300px;top:0;border:1px solid #bfbfbf; overflow:hidden;">
<span style="position:absolute;top:0;">这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</span>
</div>
<input type="button" onclick="slideUp('up','slide_div',3,200)" value="向上" />
<input type="button" onclick="slideUp('down','slide_div',3,200)" value="向下" />