Эй, я хочу добавить News Ticker в мое приложение rails. Я нашел этот тикер CSS: http://cssdeck.com/labs/css-news-tickerПочему этот css тикер использует только первые четыре сообщения
Я не знаю, почему он отображает только четыре первых сообщения. Можете ли вы помочь мне изменить этот код, чтобы отобразить все сообщения из моей таблицы, чтобы получить данные, которые я использую .each, поэтому я думаю, что это не основная проблема.
Я создал динамический один с примером вы дали, я вычисляю через JS количество Li, а затем рассчитать то, что в% от ключевого кадра путем деления 100 на количество li's внутри ul. Вы можете проверить пример здесь:
https://jsfiddle.net/erv1b8nh/2/
The 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 анимацию, которая применяется только для 4-х элементов ... – yjs
0% {маржи-топ: 0;} \t 25% {Запас верхом: -26px;} \t 50% {рентабельность-топ: -52px;} \t 75% {рентабельность-топ: -78px;} \t 100% {рентабельность-топ: 0;} если приложение есть что-то n элементов, вы не можете анимировать с% позиций ... нужно найти другие способы сделать это. – yjs
Спасибо @yjs за это объяснение. Теперь я понимаю, как это работает. – schadock