discuz 元素上下单行滚动效果

效果：竖排列表 元素上下滚动 上一行显示 下一行消失
代码：

1. <ul id="tu87_index_comments_tips" style="height:305px;overflow: hidden;">
   
2. <span class="firstli"></span>
   
3. <!--列表-->
   
4. <li><a href="#" target="_black" title="#">标题内容</a></li>
   
5. <!--列表 end-->
   
6. </ul>
   
7. <script>
   
8.         jQuery(document).ready(function(e) {
   
9.             var timer = setInterval("tips_scroll()",3500);
   
10.             jQuery("#tu87_index_comments_tips li:gt(4)").css("height","0");
    
11.             jQuery("#tu87_index_comments_tips").bind("mouseover",function(){
    
12.                 clearInterval(timer)
    
13.             });
    
14.             jQuery("#tu87_index_comments_tips").bind("mouseout",function(){
    
15.                 timer = setInterval("tips_scroll()",3500);
    
16.             });
    
17.         });
    
18.         //最新评论滚动
    
19.         function tips_scroll(){
    
20.             var _text = "<li>" + jQuery("#tu87_index_comments_tips li:last").html() + "</li>"
    
21.             jQuery("#tu87_index_comments_tips .firstli").after(_text);
    
22.             jQuery("#tu87_index_comments_tips li").eq(0).css("height","auto");
    
23.             var _height = jQuery("#tu87_index_comments_tips li").eq(0).height();
    
24.             jQuery("#tu87_index_comments_tips li").eq(0).animate({"height":0},0,function(){
    
25.                 jQuery(this).animate({"height":_height},1000)
    
26.                 jQuery("#tu87_index_comments_tips li").eq(5).animate({"height":0},1000,function(){
    
27.                     jQuery("#tu87_index_comments_tips li").last().remove();
    
28.                 })
    
29.             })
    
30.         }
    
31.   </script>

复制代码

列表容器需要固定高度，否则会不断上下收缩、扩展，我在行内写的，也可以写到id="tu87_index_comments_tips"的css样式中。
滚动元素为#tu87_index_comments_tips li，即id="tu87_index_comments_tips"内的li部分。
<span class="firstli"></span>不可缺少，标签可换，须与jq中统一，<标签>不可与滚动元素（此例中li）相同，缺少此行则只滚动第一行。。