Question

我正在寻找一个jQuery插件，它可以帮助我解决以下问题：

我有一个我想用于标题的图像列表，但它们非常大（尤其是高度），我不想调整它们以适应我的小标题div。

我想要的是一个插件允许图像从div的底部开始（或者更确切地说是div顶部图像的顶部）并向上移动以便可以看到整个图像，一旦它们完全显示（div底部的图像底部），它们应该与下一个图像“混合”（不透明度切换或类似的东西），从而创建一个包含所有图像的连续循环。 / p>

~~我看过几个插件，但从来没有找到一个可以实现我正在寻找的东西（也许我要求太多了）但我的JS还不足以自己构建它~~

谢谢！
编辑：我决定根据alexteg的帖子去另一个方向，即：

$('#header_img img').hide(); $('#header_img img').each(function(i) { $(this).show().animate({ opacity: 1.0, marginTop: '-=' + ($(this).height() - $('#header_img').height()) }, 5000, function() { $(this).animate({ opacity: 0.0 }, 1000).hide(); }); });

现在我遇到的唯一问题是第一个图像触发，一旦完成就会触发第二个图像，但它也会立即触发下一个而不是等到整个动画结束。

现在我知道我可以用动画回调来做到这一点，但我不知道如何将它与我正在做的每个循环我的图像结合起来。理想情况下它也会继续循环（在最后一个之后再次出现第一个图像等等），所以如果有人有任何想法，我们非常感谢！

Answer 1

Cycle plugin可以很好地进行混合。如果你想要动画第一个图像，你可以使用.animate() - 函数和一个激活循环插件的回调。您可能需要隐藏第一个动画的第一个图像，然后显示它们并激活cycle-plugin。

对于循环插件，您需要放置如下图像：

<div id="header"> 
    <img src="images/header_1.jpg" width="900" height="250" /> 
    <img src="images/header_2.jpg" width="900" height="250" /> 
    <img src="images/header_3.jpg" width="900" height="250" /> 
</div>

然后您可以执行以下操作：

$(document).ready(function(){
  $('#header img').hide();
  $('#header').animate({
    opacity: 1.0,
    marginTop: '-=250',
  }, 5000, function() {
    $('#header').cycle({
      fx:   'fade',
      speed:    3000,
      timeout:  7000
    });
  });
});

然后你还需要初始的CSS：

#header {
    height: 250px;
    overflow: hidden;
}

#header img:first-child {
    margin-top: 250px;
}

当然，您需要根据需要调整所有名称，尺寸速度等。

Answer 2

我喜欢骑自行车，但我觉得这个标题可能更优雅：

Dev7的Nivo Slider http://nivo.dev7studios.com/

但是使用 alexteg 中的CSS，您也可以查看剪辑

http://www.w3schools.com/CSS/pr_pos_clip.asp

jQuery：动画标题

2 个答案: