Question

我目前拥有使用纯CSS3动画从右向左滚动的字幕样式。

HTML：

<p class="marquee">
    <span>
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. 
        </a>
    </span>
</p>

CSS：

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
}

.marquee span {
    display: inline-block;
    animation: marquee 45s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  } 100% {
    transform: translate(-100%, 0);    
  }
}

现在，该段落的滚动效果很好，我对速度感到满意，但我想扩展其可用性，以便能够处理不同长度的文本，并使动画速度取决于文本的长度。

理想情况下，我想做的是使动画速度足够慢以使文本能够被读取，并且在显示所有文本时，动画将再次恢复。

仅CSS可能无法实现（或可以实现？），所以我正在寻找一种通过JS甚至jQuery实现它的方法。我只是不知道如何以实用的方式执行此操作，JSwise。

预先感谢您的建议。

Answer 1

我在下面附加了一个jsfiddle，基本上，您使用jQuery来获取段落的长度，将该值存储在变量中，然后使用该变量设置时间，即1个字符= 1秒，但是我认为您可以更改那，我没有完整的代码，所以它可能需要一些修改，但是我认为您可以弄清楚它是如何工作的，因为它只有两行jQuery：

var length = $(".marquee").text().length;
$(".marquee").css("animation", "marquee" + length + "linear infinite");

第一行获取长度并将其存储在变量中，第二行使用该长度。

让我知道您是否需要帮助。

http://jsfiddle.net/xpvt214o/552381/

Answer 2

这是您的实际动画效果：

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  //position: absolute;
}

.marquee span {
  display: inline-block;
  animation: marquee 45s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  } 100% {
    transform: translate(-100%, 0);    
  }
}

<p class="marquee">
  <span>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. 
    </a>
  </span>
</p>

那是在视觉上注意到动画速度。

现在«扩展了其可用性，能够处理不同长度的文本，并且动画速度取决于文本的长度。» ...

您会注意到我使用width而不是.length。那是因为.length返回了有多少个字符...而所有字符都没有占据相同的空间。

现在这只是数学的三分法则，您可以为“测试的”宽度和延迟（所需的速度）定义一些默认值：

// Establish the speed you want.
// This is based on what you had on your "test" string prior to any modification using a script.
var defaultDelay = 45; // Is the CSS defined delay.
var defaultWidth = 602; // Is the width for your tested 100 char string.

$(".marquee a").each(function(){

  var width = $(this).width();
  console.log("width: "+width);
  
  var newDelay = defaultDelay*(width/defaultWidth);
  console.log("newDelay: "+newDelay);

  $(this).closest("span").css("animation", "marquee " + newDelay + "s linear infinite");
});

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*position: absolute;*/    /* Removed */
}

.marquee span {
  display: inline-block;
  animation: marquee 45s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  } 100% {
    transform: translate(-100%, 0);    
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="marquee">
  <span>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. 
    </a>
  </span>
</p>

<p class="marquee">
  <span>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. 
    </a>
  </span>
</p>

<p class="marquee">
  <span>
    <a href="#">Lorem ipsum dolor sit amet. 
    </a>
  </span>
</p>

上面三个.marquee的动画设置为相同的“速度”。

如何根据段落中文本的长度设置段落的动画时间？

2 个答案: