Question

我正在创建一个像Up to Down一样的小动画，一旦它滚动到最后，它将会向下转到Up，它会一次又一次地重复。

<style>
#scrollList{height:150px; width:200px; overflow:auto; margin:40px auto;}
#scrollList li{height:45px;}
</style>
<script type="text/javascript">
//document.getElementById("scrollList").setAttribute("onClick","scrollList()");
function scrollList() {
//var scrollHeight = document.getElementById("scrollList").scrollTop;
//console.log(scrollHeight);

var ActualscrollHeight = document.getElementById("scrollList").clientHeight;
console.log(ActualscrollHeight);

setInterval(function(){
var scrollHeight = document.getElementById("scrollList").scrollTop;
if(scrollHeight <= ActualscrollHeight){
scrollHeight = scrollHeight + 1;
//console.log(scrollHeight);
document.getElementById("scrollList").scrollTop=scrollHeight;
}


}, 3);
}
</script>

<body onload="scrollList()">
<ul id="scrollList">
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
<li>Scroll Text</li>
</ul>

Answer 1

试试这个：

function scrollList() {
    var ActualscrollHeight = document.getElementById("scrollList").clientHeight;
    var down = true;
    setInterval(function () {
        var scrollHeight = document.getElementById("scrollList").scrollTop;
        if (scrollHeight == 0) {
            down = true;
        } else if (scrollHeight >= ActualscrollHeight) {
            down = false;
        }
        scrollHeight = (!down) ? scrollHeight - 1 : scrollHeight + 1;
        document.getElementById("scrollList").scrollTop = scrollHeight;
    }, 3);
}

<强> Fiddle

Answer 2

你可以使用jQuery来做到这一点，即：

$("#scrollList").load(function(){

    while(1){
        $(this).slideUp(1000);
        $(this).slideDown(1000);
    }

});

希望这有帮助。

如何动画列表从Down到Up

2 个答案: