Code

多行文本滚动
这是一款基于jquery的文本滚动插件,支持多行滚动单行滚动,只需修改css和js。使用简单。一个页面只能用一次,不能多次使用。
多行效果预览

多行滚动演示(以4行为例,不同行数只需修改CSS和JS):


  • 这是公告标题的第一行
  • 这是公告标题的第二行
  • 这是公告标题的第三行
  • 这是公告标题的第四行
  • 这是公告标题的第五行
  • 这是公告标题的第六行
  • 这是公告标题的第七行
  • 这是公告标题的第八行
代码
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:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
    /* 给父容器里的每个li定义CSS */
    #scrollDiv li{height:25px;padding-left:10px;}
</style>

3.在body底部引入js文件:

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

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

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

<script type="text/javascript">
    $(document).ready(function() {
        $("#scrollDiv").Scroll({ line: 4, speed: 1000, timer: 2000 });
        //scrollDiv ,自定义的父容器ID
        //line: 4 ,一次滚动几行。
        //speed: 1000 ,每次滚动的速度。
        //timer: 2000 ,每次滚动停留的时间。
    });
</script>

5.修改行数:

如果要改为1行,先把scrollDiv的高度改为25px,然后在修改执行函数的line参数为1
即: $("#scrollDiv").Scroll({ line: 1, speed: 1000, timer: 2000 });
其他行数请自己试。