Question

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

我不知道为什么它只显示四个帖子。你能帮助我改变这段代码来显示我表中的所有帖子，检索我正在使用的数据。每个循环所以我认为这不是主要问题。

Answer 1

我用你给出的例子创建了一个动态的，我通过JS计算了li的数量，然后我通过将li's的数量除以{ul来计算关键帧的％。 1}}。您可以在此处查看示例：

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自动收录器仅使用前四个帖子

1 个答案: