各位大佬,好久之前在csdn看到滚动公告的代码,当时复制下来了,今天突然想起来,想用上,但是不知道如何调速度,劳烦各位大佬帮忙看看,谢谢你们!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动字幕</title>
<style>
#marquee {
color: red;
display: block;
width: 96%;
height: 30px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#marquee_text {
position: absolute;
top: 0;
left: 100%;
line-height: 30px;
display: block;
word-break: keep-all;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<div id="marquee">
<span id="marquee_text">这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕</span>
</div>
<script type="text/javascript">
marquee("marquee", "marquee_text");
function marquee(p, s) {
var scrollWidth = document.getElementById(p).offsetWidth;
var textWidth = document.getElementById(s).offsetWidth;
var i = scrollWidth;
console.log(scrollWidth, textWidth);
function change() {
i--;
if (i < -textWidth) {
i = scrollWidth;
}
document.getElementById(s).style.left = i + "px";
window.requestAnimationFrame(change);
}
window.requestAnimationFrame(change);
}
</script>
</html>
代码的原作者我找不到了,非常抱歉~