齐博x2向上滚动特效

 

要实现图中圈起来的向上滚动特效,大家可以参考下面的代码

<!--滚动开始-->
<style type="text/css">
.auto-roll{
	height:35px;
	overflow:hidden;
	background:#fff;
	margin-top:10px;
}
.auto-roll li{
	padding-left:8px;
	line-height:35px;
}
.auto-roll li i:nth-child(1){
	color:orange;
	margin-right:7px;
}
.auto-roll li a{
	color:orange;
}
</style>
	<div class="auto-roll">
		<ul class="qun_wapindex_r001">
			{qb:tag name="qun_wapindex_r001" type="qun" order="id" by="desc" rows="5" js="qun_wapindex_r001"}
			<li><i class="fa fa-volume-up"></i>恭喜<a href="{$rs.url}">{$rs.title}</a>入驻成功</li>
			{/qb:tag}
		</ul>
	</div>
<script type="text/javascript"> 
    function autoScroll(obj){  
		$(obj).find("ul").animate({  
			marginTop : "-35px"  
		},1000,function(){  
			$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
		})  
	}  
	$(function(){ 
		var scroll=setInterval('autoScroll(".auto-roll")',2500);
         $(".auto-roll").hover(function(){
            console.log("aaa");
            clearInterval(scroll);
         },function(){
            scroll=setInterval('autoScroll(".auto-roll")',2500);
         });
	}); 
</script> 
<!--滚动结束-->

上面是标签调用圈子的

{qb:tag name="qun_wapindex_r001" type="qun" order="id" by="desc" rows="5" js="qun_wapindex_r001"}

你把
type="qun" 改成 type="bbs"
就是调用论坛的内容

 

https://www.003333.xyz/

posted @ 2021-12-15 12:22  半抹灯芯  阅读(28)  评论(0编辑  收藏  举报