jQuery实现文字上下滚动

实现背景：
有时候我们需要实现文字上下滚动的效果，一个实际应用背景就是展示通知。我们在网站上通常会有一个高度一定的区域用来展示通知，然而通知有好几条，而这个区域一次只能显示一条。这种情况下，就需要文字上下滚动，来循环播放每一条通知。

实现原理
jQuery的animate技术

原理分析
我们首先穷举下要实现一次显示一条，每个步骤是怎样的，比如对于下面的通知列表

<style>
#notices { height:30px; overflow:hidden }
#notices p { height:30px; line-height:30px; }
</style>
<div id="notices">
    <p>ABC</p>
    <p>DEF</p>
    <p>GHI</p>
</div>

由于overflow的限制作用，实际便只能显示第一条P（ABC）,剩下的两条则被隐藏了
如果我们要显示DEF的话，显然代码应该改为：

<p style="margin-top:-30px">ABC</p>
<p>DEF</p>
<p>GHI</p>

这样子ABC被拉到上面隐藏，显示区域中只显示DEF，
如果要显示GHI，则代码应该为：

<p style="margin-top:-30px">ABC</p>
<p style="margin-top:-30px">DEF</p>
<p>GHI</p>

这样子ABC和DEF都被拉到上面隐藏，显示区域中只有GHI

我们可以发现一个普遍的规律，用(i)表示要显示的第i条文字，后面的数字表示各个p的margin-top，可以有：
(1) 0 0 0
(2) -30 0 0
(3) -30 -30 0

因此，我们可以找出关系就是从第1到i-1条的margin-top要为-30，如果是第1条，则全部设为0，对此，我们可以写出实现代码

$(function(){
    var scrollTime = 3000; // 滚动时间
    var maxLen = $("#notices p").length; // 获取总条数
    var cur = 0; // 当前要显示的那一条
    // 设置每scrollTime毫秒执行一次
    setInterval(function() {
        // 当为第一条的时候（即下标为0），将所有的margin-top设为0px
        if(cur==0) {
            $("#notice_scroller p").css("margin-top", "0px");
        } else {
            // 要显示第i+1条（i>0）的时候，为0~i设置margin-top为-30px
            // 为了实现动画滚动效果，采用jQuery的animate函数
            for(var i=0; i<cur; i++) {
                $("#notice_scroller p:eq("+i+")").animate({marginTop: "-30px"});
            }
        }
        //计算出下一条的下标，即如果下一条大于最大条目数，就重新从第一条开始
        cur = cur+1 == maxLen ? 0 : cur+1;
    }, scrollTime);
});