注册 | 登录 |
地方论坛门户及新闻和人才网址大全

discuz 元素上下单行滚动效果

时间:2021-07-21人气:-


效果:竖排列表 元素上下滚动 上一行显示 下一行消失
代码:
<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)相同,缺少此行则只滚动第一行。。

上篇:discuz 宽窄屏切换代码宽屏与窄屏切换代码$_G['se...

下篇:discuz 切换网页风格样式代码