H5 div文字循环滚动

实际上也叫跑马灯。说起跑马灯这个词，还是去年或前年写iOS时候用到的呢，不知道是哪位前辈兴得这个词儿。在h5里俗点儿说就是，使用一个div做容器，让里面的文字水平轮番播放。

之前在oc内都是使用第三方来写，功能很多，实现方式多样。GitHub可以搜出来很多。今天主要记录一下如何使用js来实现跑马灯的效果。先复制部分代码上来吧。

//增加滚动方法

  var requestAnimationFrame =

window.requestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function (callback) { window.setTimeout(callback, 1000 /60); };

var winW=$(window).width();

  var judgeLeft=$("body").find(".cont .pssm_con .content").width()+20-winW;

  var startLeft=0;

  if(judgeLeft>0){

var doubleT=$("body").find(".cont .pssm_con .content").text()+" "+$("body").find(".cont .pssm_con .content").text();

      $("body").find(".cont .pssm_con .content").html(doubleT);

      var judgeW=$("body").find(".cont .pssm_con .content").width();

      var jsd=0.7;

      loop();

      function loop(){

startLeft-=jsd;

          if(startLeft+judgeW/2+jsd<=0) startLeft=jsd;

          $("body").find(".cont .pssm_con .content").css("marginLeft",startLeft+"px");

          requestAnimationFrame(loop);

      }

}

以上是部分js内代码，需要注意的是滚动的文字所在标签，外面必须要再套一个容器，不然judgeLeft会等于0进不了判断，那就不能实现循环滚动了，这一点从代码内就可以看出来。