前言最近写了一个文字跑马灯的项目需求。刚开始用js写，可以满足要求。后来想了另外一种方式（分别是html和css）来达到同样的要求，降低性能消耗。一、需求分析：需求点1、判断文本长度和容器长度，如果文本长度大于容器长度，则开始滚动，否则不滚动；需求点2、判断滚动结束，在结束时间点触发事件（例如：增加或减少样式等）；一、JS实现思路：1、确定文本的长度和容器的长度。如果文本的长度大于容器的长度，就会开始滚动，否则不会滚动。(offsetWidth)2.获取滚动条到元素左侧的距离，递归滚动，直到滚动后的距离等于文本长度退出递归。(scrollLeft)如果你对offsetWidth和scrollLeft不熟悉，可以点这里查看offsetWidth和scrollLeft效果图注：文字抖动是因为录制时间过长。ps做的gif文件只能在500帧以下，降低帧率抖动才能出现文字。代码部分预览演示：JS实现文本跑马灯总结js方法可以完美满足子需求1和自需求2。判断文本和容器的长度可以通过offsetWidth来判断。如果文本长度大于容器长度，则开始滚动。window.onload=functioncheckScrollLeft(){//判断文本长度是否大于框长if(boxWidth>=textWidth){returnfalse}content.innerHTML+=content.innerHTMLdocument.querySelector('.text').classList.add('padding')//更新textWidth=document.querySelector('.text').offsetWidth//开始滚动触发事件toScrollLeft()}根据滚动条到的距离判断滚动结束元素的左边和文本的长度，如果当滚动条到元素左边的距离等于文本的长度时，滚动结束。functiontoScrollLeft(){//如果文本长度大于滚动条的距离，递归拖动if(textWidth>box.scrollLeft){box.scrollLeft++setTimeout('toScrollLeft()',18);}else{//滚动结束触发事件}}2、HTML实现效果图：代码部分：1.如果文本超过宽度，它会自动向左滚动。如果文本超过宽度，它会自动滚动到左边的滚动条。非常简洁的代码~,~MarqueeAPI虽然marquee标签的API非常丰富，但是在MDN上对该标签的描述如下：Thisfeatureisobsolete。尽管它在某些浏览器中可能仍然有效，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它。尽管某些浏览器仍然支持它，但这不是必需的。此外，使用此元素基本上是您可以对用户做的最糟糕的事情之一，所以请不要这样做。所以，根据我们IT圈跟上文档标准的原则，在项目中尽量不要使用跑马灯标签。1.能够判断什么时候开始滚动。window.onload=functioncheckScrollLeft(){//判断文本长度是否大于框的长度if(textWidth>wrapWidth){//开始滚动并触发事件text.style.paddingRight='300px'cont.style.left="-870px"}}同时也可以满足子需求点2，判断滚动结束。//滚动结束document.addEventListener("transitionend",function(){console.log("end")},false)EpilogueReviewrequirements需求点1.确定文本长度和容器长度，如果文本长度大于容器长度开始滚动，否则不滚动；需求点2、判断滚动结束，在结束时间点触发事件（例如：加减样式等操作）；比较实现方法的优缺点js实现跑马灯效果html实现跑马灯效果css实现跑马灯效果需求点1?????需求点2?????兼容性????如果需要满足需求，两个js而css是可以实现的。但是考虑到兼容性，在ios9以下和Android4.4以下不支持css，其他好的方案正在考虑中。如果大家有好的解决方案欢迎在下方留言与我交流~另外css可以作为简单的展示效果也可以优先考虑，比如下面代码部分预览Democssseamless的css无缝滚动效果图滚动动画因此，工具本身没有好坏之分，什么时候使用哪个工具。我们需要有清醒的头脑。------------------------华丽的分割线--------------------关于我github主页（点击进入）我的公众号（点击进入）我的掘金主页（点击进入）我的简书主页（点击进入）参考最新的w3c标准HTML_make滚动字幕_marquee标签
