时间:2021-05-02
效果:竖排列表 元素上下滚动 上一行显示 下一行消失
代码:
<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)相同,缺少此行则只滚动第一行。。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了jquery实现广告上下滚动效果的具体代码,供大家参考,具体内容如下一、jquery上下滚动预约记录jquery广告上下滚动效果,直接上代码
通过jquery的animate实现上下单行自动跳转.rool-div{height:50px;width:700px;margin:0auto;positio
JavaScript无缝上下滚动加定高定宽停顿效果(兼容ie/ff)JavaScript无缝上下滚动加定高定宽停顿效果(兼容ie/ff)body{font-si
本文实例讲述了js实现带按钮的上下滚动效果。分享给大家供大家参考。具体实现方法如下:js带按钮上下滚动效果ul{margin:0;padding:0;list-
本文实例讲述了JS实现单行文字不间断向上滚动的方法。分享给大家供大家参考。具体分析如下:前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要