2023年7月14日发(作者：)

H5div⽂字循环滚动实际上也叫跑马灯。说起跑马灯这个词，还是去年或前年写iOS时候⽤到的呢，不知道是哪位前辈兴得这个词⼉。在h5⾥俗点⼉说就是，使⽤⼀个div做容器，让⾥⾯的⽂字⽔平轮番播放。之前在oc内都是使⽤第三⽅来写，功能很多，实现⽅式多样。GitHub可以搜出来很多。今天主要记录⼀下如何使⽤js来实现跑马灯的效果。先复制部分代码上来吧。//增加滚动⽅法 var requestAnimationFrame =tAnimationFrame ||uestAnimationFrame ||RequestAnimationFrame ||estAnimationFrame ||function (callback) { eout(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进不了判断，那就不能实现循环滚动了，这⼀点从代码内就可以看出来。