实现背景:
有时候我们需要实现文字上下滚动的效果,一个实际应用背景就是展示通知。我们在网站上通常会有一个高度一定的区域用来展示通知,然而通知有好几条,而这个区域一次只能显示一条。这种情况下,就需要文字上下滚动,来循环播放每一条通知。
实现原理
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);
});