齐博x2向上滚动特效

2022-12-04,,,,

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

<!--滚动开始-->
<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/

齐博x2向上滚动特效的相关教程结束。

《齐博x2向上滚动特效.doc》

下载本文的Word格式文档,以方便收藏与打印。