愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

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);
});