随机输出数据实现弹幕效果。
时间:2020-12-14 来源:本站
有朋友看中了别人网站的弹幕效果,但是想拔那个效果,我看了一下太过于复杂。百度上找了一下素材,发现下面这个特别简单。先引入JQ,然后在网页底部加入以下代码就可以实现了。
其中的
{pboot:list scode=8 num=10}
<div><span>[list:title lencn=10]</span></div>
{/pboot:list}
是调用的后台数据,如果你使用的是DEDE,可以换成DEDE的标签即可。
直接上代码。
<style type="text/css">
.barrager{width:100%; margin:0 auto;height:500px;overflow:hidden;position:fixed; bottom: 0; left:0; z-index: 9999999999999999999999999;}
.barrager div{position:absolute; }
.barrager div span{ height: 30px; line-height: 30px; background:rgba(0,0,0,0.3); border-radius: 20px; padding:5px 15px;}
</style>
<div class="barrager">
{pboot:list scode=8 num=10}
<div><span>[list:title lencn=10]</span></div>
{/pboot:list}
</div>