前端实现⽂字跑马灯的三种⽅式
前⾔
最近写了⼀个⽂字跑马灯的项⽬需求，刚开始⽤js写，能够完成需求。后⾯想着换种⽅式(分别是html和css)来实现同⼀个需求，以减少性能消耗。
⾸先，需求分析:
需求点1.判断⽂字的长度和容器的长度，如果⽂字长度⼤于容器长度则开始滚动，否则不滚动；
需求点2.判断滚动滚动的结束，在结束的时间点触发事件(⽐如: 增减样式等操作)；
⼀、JS实现
思路:
1.判断⽂字的长度和容器的长度，如果⽂字长度⼤于容器长度，则开始滚动，否则不滚动。(offsetWidth)
2.获取滚动条到元素左边的距离，递归滚动，直到滚动后的距离等于⽂字的长度退出递归。(scrollLeft)
如果不熟悉offsetWidth，scrollLeft，您可以点击这⾥、
效果图
注释: ⽂字抖动现象是因为录制时间过长，ps制作gif⽂件只能是500帧以下，通过降低帧率才出现了⽂字抖动。 代码部分
预览Demo：
⼩结
js的⽅式能够完美的满⾜⼦需求点1和⾃需求点2。
判断⽂字和容器的长度可以通过offsetWidth来判断。如果⽂字长度⼤于容器长度，则开始滚动。
// 判断⽂字长度是否⼤于盒⼦长度
if(boxWidth >= textWidth){ return false}
content.innerHTML += content.innerHTML
document.querySelector('.text').classList.add('padding')
// 更新
textWidth = document.querySelector('.text').offsetWidth
// 开始滚动触发事件
toScrollLeft()
html document是什么}
复制代码
判断滚动的结束根据滚动条到元素左边的距离和⽂字的长度判断，如果滚动条到元素左边的距离等于⽂字的长度，则结束滚动。
function toScrollLeft(){
//  如果⽂字长度⼤于滚动条距离，则递归拖动
if(textWidth > box.scrollLeft){
box.scrollLeft++
setTimeout('toScrollLeft()', 18);
}
else{
// 滚动结束触发事件
}
}
复制代码
⼆、HTML实现
效果图:
代码部分:
<marquee behavior="behavior" width="200" loop="2">1.⽂字如果超出了宽度⾃动向左滚动⽂字如果超出了宽度⾃动向左滚动。</marquee>
复制代码
⾮常简洁的代码~、~
marquee的API
虽然marquee标签的api⼗分丰富，但是该标签在MDN上是这样描述的：
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
元素已经过时，请不要再使⽤。尽管⼀些浏览器仍然⽀持它，但它不是必须的。此外，使⽤这个元素基本上是你可以对你的⽤户做最糟糕的事情之⼀，所以请不要这样做。
所以，根据咱们IT圈内的紧跟⽂档标准的原则，对marquee标签，我们在项⽬中请尽量不要使⽤
三、CSS实现
效果图
代码部分
预览Demo:
⼩结
CSS能满⾜需求点1，能够判断什么时候开始滚动。
// 判断⽂字长度是否⼤于盒⼦长度
if(textWidth > wrapWidth) {
// 开始滚动触发事件
text.style.paddingRight = '300px'
cont.style.left = "-870px"
}
}
复制代码
同时，也能满⾜需求点2，判断滚动的结束。
// 滚动结束
document.addEventListener("transitionend", function (){
console.log("end")
}, false)
复制代码
结语
回顾需求
需求点1.判断⽂字的长度和容器的长度，如果⽂字长度⼤于容器长度则开始滚动，否则不滚动；
需求点2.判断滚动滚动的结束，在结束的时间点触发事件(⽐如: 增减样式等操作)；
实现⽅式的优劣对⽐
js实现跑马灯效果html实现跑马灯效果css实现跑马灯效果
需求点1✔ ✘✔
需求点2✔ ✘✔
兼容性✔ ✘✘
如果需要满⾜需求，js和css都能够实现。但是考虑到兼容性，css在ios9以下，安卓4.4以下不⽀持，其他好的解决⽅案在考虑中。如果你有好的解决⽅案，欢迎在下⽅留⾔与我交流~
另外，css⽤作单纯的展⽰效果⽤还是能优先考虑的，⽐如下⽅的css⽆缝滚动
效果图
代码部分
预览Demo
所以，⼯具本⾝没有优劣之分，什么时候⽤什么⼯具。我们要有清晰的思路。
-------------------------华丽的分割线--------------------
关于我
参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。