<style>

　　.inform{height:2rem;width:100%;margin-bottom: 0.75rem;position: relative;overflow: hidden;}
　　.inform_wrap{height:2rem;width:94%;margin: 0 auto;background: #fff;border-radius: 0.2rem;font-size: 0.55rem;position: absolute;top:0rem;left:3%;}
　　.inform_wrap p{line-height: 2rem;padding-left:1rem;background: url("../images/lab.png") 0 center no-repeat;background-size: 0.65rem 0.55rem}
　　.inform_wrap p span{float:right;color:#a9a9a9;}

</style>

<div class="inform">
　　<div class="inform_wrap" id="rollText">
　　　　<p>哈利波** 成功獲得 1.00 元獎(jiǎng)勵(lì)<span>2017/09/23 12:04</span></p>
　　　　<p>哈利波** 成功獲得 2.00 元獎(jiǎng)勵(lì)<span>2017/09/23 12:04</span></p>
　　　　<p>哈利波** 成功獲得 3.00 元獎(jiǎng)勵(lì)<span>2017/09/23 12:04</span></p>
　　　　<p>哈利波** 成功獲得 4.00 元獎(jiǎng)勵(lì)<span>2017/09/23 12:04</span></p>
　　　　<p>哈利波** 成功獲得 5.00 元獎(jiǎng)勵(lì)<span>2017/09/23 12:04</span></p>
　　　　<p>哈利波** 成功獲得 6.00 元獎(jiǎng)勵(lì)<span>2017/09/23 12:04</span></p>
　　</div>
</div>

<script type="text/javascript">
　　var listSum = $('#rollText p').length*2; ?//高為幾像素，就乘幾，否則顯示不全
　　var cur = 0;
　　setInterval(function(){
　　　　cur = cur+2;
　　　　if(cur >= listSum){
　　　　cur = 0;
　　　　$('#rollText').animate({
　　　　　　'top':'0'
　　　　},2);
　　}else{
　　　　$('#rollText').animate({
　　　　　　'top':( -cur +'rem')
　　　　},500);
　　}
　　},3000);
</script>

?

轉(zhuǎn)載于:https://www.cnblogs.com/xiaokele1314/p/7614108.html

總結(jié)

以上是生活随笔為你收集整理的手机端公告文本回滚（简单的jq代码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。