花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來到素材無憂網(wǎng),按 + 收藏我們
登錄 注冊 退出 找回密碼

discuz 元素上下單行滾動效果

時間: 2019-05-24 11:57 閱讀: 作者:素材無憂網(wǎng)

效果:豎排列表 元素上下滾動 上一行顯示 下一行消失
代碼:
<ul id="tu87_index_comments_tips" style="height:305px;overflow: hidden;">
<span class="firstli"></span>
<!--列表-->
<li><a href="#" target="_black" title="#">標題內(nèi)容</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>


列表容器需要固定高度,否則會不斷上下收縮、擴展,我在行內(nèi)寫的,也可以寫到id="tu87_index_comments_tips"的css樣式中。
滾動元素為#tu87_index_comments_tips li,即id="tu87_index_comments_tips"內(nèi)的li部分。
<span class="firstli"></span>不可缺少,標簽可換,須與jq中統(tǒng)一,<標簽>不可與滾動元素(此例中l(wèi)i)相同,缺少此行則只滾動第一行。。

版權(quán)聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!

轉(zhuǎn)載請注明: discuz 元素上下單行滾動效果

標簽:  
相關(guān)文章
模板推薦