介绍
这篇文章主要介绍了如何实现文字跑马灯,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
最近写了一个文字跑马灯的项目需求,刚开始用js写,能够完成需求。后面想着换种方式(分别是html和css)来实现同一个需求,以减少性能消耗。
首先,需求分析:
需求点1。判断文字的长度和容器的长度,如果文字长度大于容器长度则开始滚动,否则不滚动;
需求点2。判断滚动滚动的结束,在结束的时间点触发事件(比如:增减样式等操作);
<强>一、JS实现
思路:
1。判断文字的长度和容器的长度,如果文字长度大于容器长度,则开始滚动,否则不滚动。(offsetWidth)
2。获取滚动条到元素左边的距离,递归滚动,直到滚动后的距离等于文字的长度退出递归(scrollLeft)。
效果图
注释:文字抖动现象是因为录制时间过长,ps制作gif文件只能是500帧以下,通过降低帧率才出现了文字抖动。
代码部分HTML:
& lt; div类=癰ox"比;
& lt; div类=癱ontent"祝辞
类& lt; p=皌ext"祝辞1。文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。你们;/p>
& lt;/div>
& lt;/div> CSS:
* {
保证金:0;
填充:0;
}
.box {
margin-left: 200 px;
margin-top: 100 px;
颜色:# FFF;
空白:nowrap;}
溢出:隐藏;
宽度:300 px;
背景:# 000;
}
.content p {
显示:inline-block;
}
.content p.padding {
padding-right: 300 px;
} JS:
让[框,内容,文本]=[
document.querySelector (& # 39; .box& # 39;),
document.querySelector (& # 39; .content& # 39;),
document.querySelector (& # 39;。text # 39;)
]
让[textWidth, boxWidth]=[
text.offsetWidth,
box.offsetWidth
]
窗口。onload=函数checkScrollLeft () {//判断文字长度是否大于盒子长度
如果(boxWidth比;textWidth){返回false}
内容。innerHTML +=content.innerHTML
document.querySelector (& # 39;。text # 39;) .classList.add(& # 39;填充# 39;)//更新
textWidth=document.querySelector (& # 39;。text # 39;) .offsetWidth
toScrollLeft ()
}
函数toScrollLeft () {//如果文字长度大于滚动条距离,则递归拖动
如果(textWidth比;box.scrollLeft) {
box.scrollLeft + +
setTimeout (& # 39; toScrollLeft () & # 39;, 18);
}
其他{//setTimeout (“fun2 ()“, 2000);
}
} 小结
js的方式能够完美的满足子需求点1和自需求点2 .
判断文字和容器的长度可以通过offsetWidth来判断。如果文字长度大于容器长度,则开始滚动。
窗口。onload=函数checkScrollLeft () {//判断文字长度是否大于盒子长度
如果(boxWidth祝辞=textWidth){返回false}
内容。innerHTML +=content.innerHTML
document.querySelector (& # 39;。text # 39;) .classList.add(& # 39;填充# 39;)//更新
textWidth=document.querySelector (& # 39;。text # 39;) .offsetWidth//开始滚动触发事件
toScrollLeft ()
} 判断滚动的结束根据滚动条到元素左边的距离和文字的长度判断,如果滚动条到元素左边的距离等于文字的长度,则结束滚动。
函数toScrollLeft () {//如果文字长度大于滚动条距离,则递归拖动
如果(textWidth比;box.scrollLeft) {
box.scrollLeft + +
setTimeout (& # 39; toScrollLeft () & # 39;, 18);
}
其他{//滚动结束触发事件
}
} <强>二,HTML实现
效果图:
& lt;选框行为=癰ehavior"宽度=?00”;循环=?“祝辞1。文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。你们;/marquee>
非常简洁的代码~,~
选框的API
虽然选框标签的API十分丰富,但是该标签在MDN上是这样描述的:
这个功能已经过时了。尽管它可能仍然在一些浏览器工作,它的使用是气馁因为它随时可能被删除。尽量避免使用它。
