4

我们正在尝试实现一个简单的文本轮播，将句子中的单个单词替换为其他几个单词。它们将淡入/淡出，容器宽度应缩小/放大以适应新词。听起来很简单，但我们很难。

应该像www.branch.com上的第二行一样起作用。

找不到这个插件？图像轮播肯定，但不是文本，也不是更改前一个容器的。

它通过单词，但容器需要更改宽度。

    $('#caption p:gt(0)').hide();
    setInterval(function() {
        $('#caption span:first-child').fadeOut('slow')
           .next('span').fadeIn('slow')
           .end().appendTo('#caption');
    }, 2000);

这是

 <div id="caption">
      <span>best</span>
      <span>ultimate</span>
      <span>excellent</span>
      <span>fantastic</span>
   </div>

镇上的网站。

#container {
   position: relative;
}

#container p {
   position: absolute; 
   top: 0; 
   left: 0;
}

有什么建议么？

4

2 回答 2

3

我希望这能解决问题http://jsfiddle.net/JVuEv/

function ticker() {
    var caption = $('#caption');
    var elements = caption.children();
    $(elements[0]).fadeOut('slow', function () {
        caption.append($(this));
        $(elements[1]).show();
    });
}
于 2013-05-20T06:47:25.257 回答
2

如果您想获得更类似branch.com的效果，则需要以下添加/更改”：

关于 CSS：

#caption需求：

  • 填充：0px；
  • 显示：内联块；
  • 位置：相对；
  • 垂直对齐：底部；
  • 过渡：宽度0.25s线性；

#caption > span需求：

  • 位置：绝对；
  • 顶部：0px；
  • 左：0px；

关于 JS：
您需要明确地将#caption's width 设置为显示元素的宽度（每次发生转换时），使用如下所示：

$("#caption").css("width", $(<the_element_to_be_shown>).width());

您还必须设置初始宽度和高度：

$("#caption").css("width", $("#caption > span:first-child").width());
$("#caption").css("height", $("#caption > span:first-child").height());

我在这个简短的演示中将所有内容放在一起。

于 2013-05-20T06:57:02.963 回答