手机端公告文本回滚(简单的jq代码)

<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 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 2.00 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 3.00 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 4.00 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 5.00 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 6.00 元奖励<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>

 

posted @ 2017-09-30 10:54  夜冷霜星  阅读(298)  评论(0编辑  收藏  举报