为什么这个 css 代码只使用前四个帖子

Question

嘿，我想将 News Ticker 添加到我的 rails 应用程序中。我找到了这个 CSS 代码：http://cssdeck.com/labs/css-news-ticker

不知道为什么只显示前四个帖子。你能帮我更改此代码以显示我的 table 中的所有帖子以检索我正在使用 .each 循环的数据所以我认为这不是主要问题。

Answer 1

我用你给的例子创建了一个动态的，我通过 JS 计算了 li 的数量，然后我通过将 100 除以 li's 的数量来计算关键帧的百分比是多少ul。您可以在此处查看示例：

js如下：

var style = document.documentElement.appendChild(document.createElement("style")),
  rule1 = " ticker { 0%   { margin-top:0; }";
  rule2 = " 100% { margin-top:0; } }";

  var n = $('#news li').length;
  var rule3 = "";
  var help = 1;
  var nSpin = (100/n).toFixed(2);
  while(n > 1)
  {
    rule3 = rule3 + " " + nSpin*help + "% { margin-top:" + help*-27 + "px; }";
    help = help + 1;
    n = n - 1;

  }

  rule = rule1 + rule3 + rule2;

if (CSSRule.KEYFRAMES_RULE) { // W3C
  style.sheet.insertRule("@keyframes" + rule, 0);
} else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
  style.sheet.insertRule("@-webkit-keyframes" + rule, 0);
}

当然你应该根据元素的数量来调整动画时间。希望对您有所帮助:)

为什么这个 css 代码只使用前四个帖子

Why this css ticker use only first four posts

html

css

ticker