使用 javascript 更改 webkit 过渡持续时间

Question

我有一个自动收报机磁带运行的文本，但我想根据要显示的文本量更改持续时间的持续时间。当数量少时，文本运行的速度很慢，这很好，但是文本很多，磁带呼啸而过。

.marquee {
    /* margin-left: auto;
    margin-right: auto; */
    width: 800px;
    height: 25px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #FF0000;
    background: GhostWhite;
    color: black;
    font-size: 20px;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}



/* Make it move */
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
 }

在html中，我运行宁跨度如下：

 <p class="marquee"><span><?php echo getEvents(); ?></span></p>

getEvents() 是一个 php 函数，用于填充代码；由此我想确定文本的长度以限制文本的速度

Answer 1

animation 指令中的 20s 表示文本必须在其容器中移动多长时间。短文本将在 20 秒内缓慢移动以覆盖该距离。更长的文本必须移动得更快。

查看这个 JSfiddle：https://jsfiddle.net/s40e3Lng/2/

以下 JS/jquery 设置 time 将 <p> 交叉为基于 .

内字符串的 length 的公式

$('p.marquee span').each(function() {
   var len = $(this).html().length;
   var speed = 100;
   var time = 4 + (4*len)/speed;
   $(this).attr('style', 'animation: marquee '+time+'s linear infinite;');
});

在 JSfiddle 中，您可以尝试使用公式，直到获得您喜欢的速度。只需更改JS代码并单击左上角的"Run"。

Answer 2

如果您更改 html 以便

<p class="marquee" id="mID">

然后您可以使用 javascript 来操纵

的元素

document.getElementById("mID").style.WebkitTransitionDuration = "1s"; // Code for Safari 3.1 to 6.0
document.getElementById("mID").style.transitionDuration = "1s";

使用 javascript 更改 webkit 过渡持续时间

Changing webkit transition duration with javascript

php

webkit