本文介绍如何利用HTML、CSS和jQuery实现字幕滚动公告的效果。通过设置CSS样式，创建HTML结构，然后编写JavaScript函数marquee，实现字幕的平滑滚动。具体实现包括设置div容器和span文本，通过jQuery的animate方法调整文本的left属性，达到字幕滚动视觉效果。
css样式：
#affiche {
color: red;display: block;
width: 96%;
height: 30px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.affiche_text {
position: absolute;
top: 0;
left: 100%;
line-height: 30px;
display: block;
word-break: keep-all;
text-overflow: ellipsis;
white-space: nowrap;
}
html标签：
<div id="affiche>
<span class="affiche_text">字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~</span>
</div>
js：
//公告滚动
var timer = setTimeout(marquee, 1000);
function marquee() {
var scrollWidth = $('#affiche').width();
var textWidth = $('.affiche_text').width();
var i
最低0.47元/天 解锁文章
扫一扫
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
