Question

我正在这里用Twitter小部件做一个页面。嗯，我真的是一个使用这个小部件的新手，我没有一个关于定制它的想法这是我走了多远。首先它会显示如下：

enter image description here

名称将从上到下每隔30秒一个接一个地出现，背景是透明的。请忽略边界（对不起，我不能给出一个像样的照片）

那么我想要做的就是让它看起来像这样：

enter image description here

从上到下，它将从下到上显示大约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做的：< / p>

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

Twitter小部件定制

1 个答案: