Javascript 如何使用 HTML5 平滑滚动文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32638465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll text smoothly using HTML5
提问by software is fun
I want to scroll a single line of text smooth as possible
我想尽可能平滑地滚动一行文本
My target device is a 1920 x 120 resolution with no input. (no keyboard or mouse). It has an Underpowered CPU.
我的目标设备是 1920 x 120 分辨率，没有输入。（没有键盘或鼠标）。它有一个动力不足的 CPU。
<html>
<head>
<title>News</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function() {
$.get('data.txt', function(data) {
$('#text-file-container').html(data);
});
});
</script>
<link rel="stylesheet" href="content.css">
</head>
<body>
<div id="scroll">
<h1>
<marquee behavior="scroll" direction="left" scrollamount="15" id="text-file-container"></marquee>
</h1>
</div>
</body>
</html>
I've tried a JS library i found online but it was performing very poorly I am open to suggestions
我尝试了一个我在网上找到的 JS 库，但它的性能很差我愿意接受建议
回答by Alvaro Montoro
You could try using CSS animations and transitions instead a JavaScript library/plugin or marquee(that as mentioned on the comments, it is obsolete and should be avoided).
您可以尝试使用 CSS 动画和过渡而不是 JavaScript 库/插件或marquee（如评论中所述，它已过时，应避免使用）。
One example of how it could be done with CSS and animations:
如何使用 CSS 和动画完成的一个示例：
* {
margin:0;
padding:0;
border:0;
}
@keyframes slide {
from { left: 100%;}
to { left: -100%;}
}
@-webkit-keyframes slide {
from { left: 100%;}
to { left: -100%;}
}
#marquee {
color:red;
background:#f0f0f0;
width:100%;
height:120px;
line-height:120px;
overflow:hidden;
position:relative;
}
#text {
position:absolute;
top:0;
left:0;
width:100%;
height:120px;
font-size:30px;
animation-name: slide;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: slide;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count: infinite;
}<div id="marquee">
<div id="text">Your Text</div>
</div>You can adjust the speed of the marquee by changing the value of the animation-duration. And you should modify the value of the todepending on the length of text.
您可以通过更改 的值来调整选取框的速度animation-duration。您应该to根据文本的长度修改 的值。
Update after comment from Jay: the marquee failed when the text was larger than the space of the marquee. One solution would be to make blank space not wrap/break and animations that take into account the size of the text (using transforms and not only position to move the text):
Jay 评论后更新：当文本大于选取框的空间时，选取框失败。一种解决方案是使空格不换行/中断和考虑文本大小的动画（使用变换而不仅仅是位置来移动文本）：
* {
margin:0;
padding:0;
border:0;
}
@keyframes slide {
from { left:100%; transform: translate(0, 0); }
to { left: -100%; transform: translate(-100%, 0); }
}
@-webkit-keyframes slide {
from { left:100%; transform: translate(0, 0); }
to { left: -100%; transform: translate(-100%, 0); }
}
.marquee {
color:red;
background:#f0f0f0;
width:100%;
height:120px;
line-height:120px;
overflow:hidden;
position:relative;
}
.text {
position:absolute;
top:0;
white-space: nowrap;
height:120px;
font-size:30px;
animation-name: slide;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: slide;
-webkit-animation-duration: 30s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count: infinite;
}<p>Text Fits</p>
<div class="marquee">
<div class="text">Text Here</div>
</div>
<p>Text overflows</p>
<div class="marquee">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem non lacus condimentum dictum quis id tortor.</div>
</div>Then the movement is a bit choppy on my browser. I will look for a more smoothsolution, but this would fix the text length issue.
然后我的浏览器上的运动有点不稳定。我会寻找更流畅的解决方案，但这将解决文本长度问题。
