小模块：公告滚动并暂停

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