齐博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.cnblogs.com/wanxiangsucai/p/15692100.html