实际上也叫跑马灯。说起跑马灯这个词，还是去年或前年写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进不了判断，那就不能实现循环滚动了，这一点从代码内就可以看出来。
