css js html 实现滚动字幕

最新推荐文章于 2024-09-06 01:06:13 发布

Web攻城狮

最新推荐文章于 2024-09-06 01:06:13 发布

阅读量7.5k

点赞数 2

分类专栏： html 文章标签：滚动字幕 CSS js

本文链接：https://blog.csdn.net/b1244154318/article/details/79130313

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动字幕</title>
<div id="affiche">
<span class="affiche_text">字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~</span>
</div>
</head>
<style>
#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;
}
</style>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js" ></script>
<script type="text/javascript">
(function(){var timer = setTimeout(this.marquee, 1000);}());
function marquee() {
var scrollWidth = $('#affiche').width();
var textWidth = $('.affiche_text').width();
var i = scrollWidth;
setInterval(function() {
i--;
if(i < -textWidth ) {
i = scrollWidth;
}
$('.affiche_text').animate({'left': i+'px'}, 20);
}, 20);
}
</script>
</html>