我试图用移动文本制作横幅。我想出了一种方法来实现,但是不幸的是我的实现存在两个主要问题。


我必须根据文本的长度手动调整px中的宽度值。
这导致主体尺寸在宽度方面变大。我希望身体保持100%/与窗口大小相同。


知道如何解决这两个问题,或者是否有更好的方法来实现这一点?



let txtAnnounce = document.createElement('div');
txtAnnounce.style = 'display: block; position: absolute; width: 600px; height: 45px; top: 65px; left: 0px; color: white; line-height: 45px; text-align: center;';
txtAnnounce.innerHTML = "Some text blah blah blach... Good for announcements with long text....! :) "
document.body.appendChild(txtAnnounce);

let txtAnnounce2 = document.createElement('div');
txtAnnounce2.style = 'display: block; position: absolute; width: 600px; height: 45px; top: 65px; left: 600px; color: white; line-height: 45px; text-align: center;';
txtAnnounce2.innerHTML = "Some text blah blah blach... Good for announcements with long text....! :) "
document.body.appendChild(txtAnnounce2);

let curLeft = 0;
let curLeft2 = 0;
setInterval(function() {
	curLeft--;
	curLeft2--;
	if (curLeft < -600) {
		curLeft = 0;
	}
	if (curLeft2 < 0) {
		curLeft2 = 600;
	}
	txtAnnounce.style.left = curLeft.toString() + 'px';
	txtAnnounce2.style.left = curLeft2.toString() + 'px';
}, 10);

<div id="announce" style="position: absolute; display: block; top: 65px; left: 0px; border-bottom: 1px solid #cccccc; height: 45px; width: 100%; background-color: #008aff; color: white; text-align: center; line-height: 45px; font-family: Arial, Helvetica, sans-serif;"></div>

最佳答案

您甚至可以尝试CSS动画,并根据设备的查看端口定义容器大小。

overflow: hidden保留公告-公告容器中包含的文本。



.announcement {
  background:  #008aff;
  padding: 15px;
  color: white;
  overflow: hidden;
}
.announcement--text {
  position: relative;
  left: 100vw;
  white-space: nowrap;
  animation: move 10s infinite;
  animation-timing-function: linear;
}
@keyframes move {
  from {left: 100vw;}
  to {left: -100vw;} //maximum length of your announcement
}

<div class="announcement">
  <div class="announcement--text">Some text blah blah blach... Good for announcements with long text....! </div>
</div>

关于javascript - 带有移动文字的横幅,根据宽度自动设置div大小并保留正文宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57989310/

10-09 16:39
查看更多