Code

单行文本滚动
这是一款基于jquery的单行文本滚动,代码较少,使用简单,可自定义滚动速度,停留时间,样式可自定义。
效果预览
  • 这是公告标题的第一行
  • 这是公告标题的第二行
  • 这是公告标题的第三行
  • 这是公告标题的第四行
  • 这是公告标题的第五行
  • 这是公告标题的第六行
  • 这是公告标题的第七行
  • 这是公告标题的第八行
代码
1.在body里加入如下HTML代码:

<div id="scrollDiv">
    <ul>
        <li>这是公告标题的第一行</li>
        <li>这是公告标题的第二行</li>
        <li>这是公告标题的第三行</li>
        <li>这是公告标题的第四行</li>
        <li>这是公告标题的第五行</li>
        <li>这是公告标题的第六行</li>
        <li>这是公告标题的第七行</li>
        <li>这是公告标题的第八行</li>
    </ul>
</div>

<!--说明-->
1.  首先创建一个div作为父容器,为了方便jquery选择器查找,需要给父容器定义id,这里定义id="scrollDiv",可自定义。
 2.  然后在父容器里创建 ul li。
 3.  每一个li就是一个要滚动的项。

2.在head标签内加入css:

<style type="text/css">
    /* 重置CSS用 */
    ul,li{margin:0;padding:0}

    /* 给父容器定义CSS */
    #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
    /* 给父容器里的每个li定义CSS */
    #scrollDiv li{height:25px;padding-left:10px;}
</style>

3.在body底部引入jquery类库:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

4.继续在body底部加入js代码:

<script type="text/javascript">
    //定义滚动函数
    function AutoScroll(obj) {
        $(obj).find("ul:first").animate({
            marginTop: "-25px"
        }, 1000, function() {//这里的1000,定义的是是滚动的速度,以毫秒为单位(1000=1秒),可自定义。
            $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
        });
    }
    $(document).ready(function() {
        setInterval('AutoScroll("#scrollDiv")', 3000)//每隔3秒滚动一次(3000=3秒)。
        //scrollDiv即自定义的父容器ID
    });
</script>