基于jquery实现的文字向上跑动类似跑马灯的效果

  想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个

  页面代码

  

复制代码 代码如下:

  <div class="recordList">

  <ul class="tpl-rotate-recordList" style="margin-top: 0px;">

  <li class="tpl-rotate-recordList-item">

  恭喜187****5204获得1000RBM

  </li>

  <li class="tpl-rotate-recordList-item">

  恭喜137****1372获得1000RBM

  </li>

  <li class="tpl-rotate-recordList-item">

  恭喜156****0276获得1000RBM

  </li>

  <li class="tpl-rotate-recordList-item">

  恭喜139****9856获得1000RBM

  </li>

  <li class="tpl-rotate-recordList-item">

  恭喜136****0580获得1000RBM

  </li>

  <li class="tpl-rotate-recordList-item">

  恭喜136****0580获得1000RBM

  </li>

  <li class="tpl-rotate-recordList-item">

  恭喜138****8118获得1000RBM

  </li>

  <li class="tpl-rotate-recordList-item">

  恭喜136****5555获得1000RBM

  </li>

  <li class="tpl-rotate-recordList-item">

  恭喜136****0580获得1000RBM

  </li>

  <li class="tpl-rotate-recordList-item">

  恭喜136****0580获得1000RBM

  </li>

  </ul>

  </div>

  js代码

  

复制代码 代码如下:

  /*自动轮换xuyw*/

  var AutoScroll = function(a) {

  $(a).find("ul:first").animate( {

  marginTop : "-20px"

  }, 500, function() {

  $(this).css( {

  marginTop : "0px"

  }).find("li:first").appendTo(this)

  })

  }

  if ($(".recordList ul li").length > 0) {

  setInterval('AutoScroll(".recordList")', 2000)

  } else {

  $(".recordList").hide()

  }