IDC资讯中心
效果：竖排列表 元素上下滚动 上一行显示 下一行消失
代码：
<ul id="tu87_index_comments_tips" style="height:305px;overflow: hidden;">
<span class="firstli"></span>
<!--列表-->
<li><a href="#" target="_black" title="#">标题内容</a></li>
<!--列表 end-->
</ul>
<script>
jQuery(document).ready(function(e) {
var timer = setInterval("tips_scroll()",3500);
jQuery("#tu87_index_comments_tips li:gt(4)").css("height","0");
jQuery("#tu87_index_comments_tips").bind("mouseover",function(){
clearInterval(timer)
});
jQuery("#tu87_index_comments_tips").bind("mouseout",function(){
timer = setInterval("tips_scroll()",3500);
});
});
//最新评论滚动
function tips_scroll(){
var _text = "<li>" + jQuery("#tu87_index_comments_tips li:last").html() + "</li>"
jQuery("#tu87_index_comments_tips .firstli").after(_text);
jQuery("#tu87_index_comments_tips li").eq(0).css("height","auto");
var _height = jQuery("#tu87_index_comments_tips li").eq(0).height();
jQuery("#tu87_index_comments_tips li").eq(0).animate({"height":0},0,function(){
jQuery(this).animate({"height":_height},1000)
jQuery("#tu87_index_comments_tips li").eq(5).animate({"height":0},1000,function(){
jQuery("#tu87_index_comments_tips li").last().remove();
})
})
}
</script>
|
列表容器需要固定高度，否则会不断上下收缩、扩展，我在行内写的，也可以写到id=”tu87_index_comments_tips”的css样式中。
滚动元素为#tu87_index_comments_tips li，即id=”tu87_index_comments_tips”内的li部分。
<span class=”firstli”></span>不可缺少，标签可换，须与jq中统一，<标签>不可与滚动元素（此例中li）相同，缺少此行则只滚动第一行。。
