Question

我想尽可能平滑地滚动一行文字

我的目标设备是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>

我尝试过在网上找到的JS库，但表现非常糟糕我愿意接受建议

Answer 1

您可以尝试使用CSS动画和过渡代替JavaScript库/插件或marquee（如评论中所述，它是obsolete and should be avoided）。

使用CSS和动画如何完成它的一个例子：

＆＃13;

* {
  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;
}

＆＃13;

<div id="marquee">
	<div id="text">Your Text</div>
</div>

＆＃13;

您可以通过更改animation-duration的值来调整选取框的速度。您应该根据文本的长度修改to的值。

comment from Jay后更新：当文字大于选框的空格时，选取框失败。一种解决方案是使空白空间不包裹/中断和动画考虑到文本的大小（使用变换而不仅仅是移动文本的位置）：

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

然后我的浏览器上的运动有点不稳定。我将寻找更多 smooth 解决方案，但这将解决文本长度问题。

如何使用HTML5顺利滚动文本

1 个答案: