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

话说上回，我们写了个返回页面顶部的小模块，这回我们写一个同样很常见的模块，即公告滚动并暂停模块。公告滚动，最简单的写法是使用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，归纳工作中随时做的可重用的小东西

转载于:https://www.cnblogs.com/bienfantaisie/archive/2010/12/21/1913101.html