效果:竖排列表 元素上下滚动 上一行显示 下一行消失
代码:
列表容器需要固定高度,否则会不断上下收缩、扩展,我在行内写的,也可以写到id="tu87_index_comments_tips"的css样式中。
滚动元素为#tu87_index_comments_tips li,即id="tu87_index_comments_tips"内的li部分。
<span class="firstli"></span>不可缺少,标签可换,须与jq中统一,<标签>不可与滚动元素(此例中li)相同,缺少此行则只滚动第一行。。
代码:
<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)相同,缺少此行则只滚动第一行。。
声明:有的资源均来自网络转载,版权归原作者所有,如有侵犯到您的权益 请联系邮箱:123456@qq.com 我们将配合处理!
原文地址:discuz 元素上下单行滚动效果发布于2023-05-04 16:55:43