【小模块】公告滚动并暂停

话说上回,我们写了个返回页面顶部的小模块,这回我们写一个同样很常见的模块,即公告滚动并暂停模块。公告滚动,最简单的写法是使用maquee标签,这个可以让你内容的内容向上下左右滚动,但是很多高级功能,比如周期性停留无法实现。把周期性停留作为需求,很多网站做了这种公告滚动:

(截图自谷姐首页)。

以下呢,咱们也来做一个。

先把最终演示放出来:

HTML代码:

<div class="ann">
<div class="in">
<a href="#">公告内容一</a>
<a href="#">公告内容二</a>
</div>
</div>

CSS代码:

.ann{ height:20px; line-height:20px; position:relative; overflow:hidden;}
.in
{ height:20px; line-height:20px; position:absolute; width:300px;}
.in a
{ height:20px; line-height:20px; display:block;}

JS代码:

$(function(){
annbox();
});
function annbox(){
var distance =20; //移动距离,同.in的height
var time =3000; //显示停留时间
var timerock =300; //滚动间隙时间
$(".in").animate({top:"-"+ distance},timerock,function(){
$(
".in a:first").insertAfter($(".in a:last")); //把滚动到顶部的a移到底部
$(".in").css("top","0");
setTimeout(
"annbox()",time);
});
}

 

注:小模块系列均基于jQuery,归纳工作中随时做的可重用的小东西

posted @ 2010-12-21 20:23  Reibin  阅读(1334)  评论(1编辑  收藏  举报

日志版权保留,转载请注明来自http://www.cnblogs.com/bienfantaisie