Настройка виджетов Twitter

Question

Я делаю страницу здесь с виджетами Twitter на стороне. Ну, я действительно новичок в использовании этого виджета, и у меня нет ни одной идеи по его настройке, это то, как далеко я зашел. Сначала это будет выглядеть так:

Имена будут появляться по одному каждые 30 секунд, сверху вниз прозрачный фон. Пожалуйста, не обращайте внимания на границы (извините, я не могу дать достойную картину)

Ну, тогда я хотел, чтобы это выглядело так:

Сверху вниз он станет снизу вверх, отображая около 5 или 6 имен, и шрифт также будет отрегулирован от наименьшего к наибольшему и расположен в чередующемся левом и правом положениях. Есть идеи? Я также был бы признателен, если бы вы дали мне небольшой урок здесь. :)

РЕДАКТИРОВАТЬ: я забыл HTML, и я использую Javascript на этом.

для _slide выглядит так:

 _slide: function(el) {
          var that = this;
          var height = getFirst(el).offsetHeight;
          if (this.runOnce) {
            new Animate(el, 'height', {
              from: 380,              
              to: height,
              time: 500,
              callback: function() 
              {
                that._fade.call(that, el);
              }
            }
            ).start();
          }
          return this;
        },

Спасибо!

Answer 1

Хорошо, так как вы не можете дать никаких указаний относительно того, какой виджет вы используете, трудно помочь вам изменить порядок порядка <li>, специфичного для вашего виджета, но вот как вы это сделаете, используя jquery:

output = '<ul id="after">';

$($("li").get().reverse()).each(function() {
    output += '<li>'+$(this).text()+'</li>';
});

$('body').append(output+'</ul>');

$("#after li:even").css({"float":"left", "clear":"right"});
$("#after li:odd").css({"float":"right", "clear":"left"});

$("#after li:nth-child(2)").css({"width":"320px", "font-size":"90%"});
$("#after li:nth-child(3)").css({"width":"260px", "font-size":"80%"});
$("#after li:nth-child(4)").css({"width":"180px", "font-size":"70%"});
$("#after li:nth-child(5)").css({"width":"100px", "font-size":"60%"});

Смотрите кодированный пример здесь - http://jsfiddle.net/ajthomascouk/6MQew/1