Почему этот тикер CSS использовать только первые четыре сообщения

Question

Привет, я хочу добавить News Ticker в мое приложение rails. Я нашел этот тикер CSS: http://cssdeck.com/labs/css-news-ticker

Я не знаю, почему он отображает только четыре первых сообщения. Можете ли вы помочь мне изменить этот код, чтобы отображать все сообщения из моей таблицы, чтобы извлекать данные, которые я использую.each, поэтому я думаю, что это не главная проблема.

Answer 1

Я создал динамический пример, который вы дали, я вычисляю через JS количество li, а затем вычисляю, каков% ключевого кадра, путем деления 100 на число li's внутри ul, Вы можете проверить пример здесь:

https://jsfiddle.net/erv1b8nh/2/

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);
}

Конечно, затем, основываясь на количестве элементов, вы должны настроить время анимации. Надеюсь, это поможет вам:)