discuz

推荐列表 站点导航

当前位置:首页 > 建站教程 > discuz >

discuz 元素上下单行滚动效果

来源:网络整理  作者:网络  发布时间:2020-12-11 01:15
效果:竖排列表 元素上下滚动 上一行显示 下一行消失 代码: ul id=tu87_index_comments_tips style=height:305px;overflow: hidden;s...
<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>  
滚动元素为#tu87_index_comments_tips li,即id="tu87_index_comments_tips"内的li部分。
列表容器需要固定高度,否则会不断上下收缩、扩展,我在行内写的,也可以写到id="tu87_index_comments_tips"的css样式中。
代码:

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

相关热词: discuz

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://www.juheyunku.com/jz/discuz/2377.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

discuz 元素上下单行滚动效果

2020-12-11 编辑:网络

<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>  
滚动元素为#tu87_index_comments_tips li,即id="tu87_index_comments_tips"内的li部分。
列表容器需要固定高度,否则会不断上下收缩、扩展,我在行内写的,也可以写到id="tu87_index_comments_tips"的css样式中。
代码:

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

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://www.juheyunku.com/jz/discuz/2377.shtml

相关文章

风云图片

推荐阅读

返回discuz频道首页