jquery实现百叶窗效果

讲解如下：

什么是百叶窗效果

百叶窗效果是指在网页上展示图片时，以一定的动画方式将图片分隔成若干根大小相等、相互覆盖的条纹，在条纹之间加上间距，使用过渡样式使条纹依次展示或隐藏的过程。该效果通常会运用到图片幻灯片等场景中。

实现过程

我们首先需要一个HTML结构，使用 ul 和 li 标签创建图片列表，并且需要使用CSS布局和样式，确定图片列表宽度、高度、边框大小等属性。如下代码所示：

<ul class="blinds">
  <li><img src="image1.jpg" alt="图片1"></li>
  <li><img src="image2.jpg" alt="图片2"></li>
  <li><img src="image3.jpg" alt="图片3"></li>
  <li><img src="image4.jpg" alt="图片4"></li>
</ul>

<style>
  .blinds {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 600px;
    height: 200px;
    border: 1px solid #ccc;
    overflow: hidden;
    position: relative;
  }

  .blinds li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    text-align: center;
  }

  .blinds img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
  }
</style>

接下来，我们使用jQuery来实现百叶窗效果。我们需要使用jQuery的 animate() 方法来实现动画效果。该方法可以让一个元素进行动画，从而最终实现百叶窗效果。具体步骤如下：

1. 首先，我们需要计算出每个条纹的高度。

var blinds = $('.blinds');
var height = blinds.height() / blinds.find('li').length;

1. 接着，我们需要遍历每个条纹，并且分别对它们进行动画处理。

blinds.find('li').each(function(index, element) {
  //隐藏当前条纹
  $(element)
    .css({ top: -index * height, zIndex: index })
    .animate({ top: '+=' + $(this).height()}, 2000);
});

在上述代码中，我们将当前条纹的 top 属性设置为负的 index * height，即当前条纹的 index 值乘以每个条纹的高度。接着，我们使用 animate() 方法让当前条纹从当前位置（负的 index * height）移动到目标位置（该条纹的高度），持续时间为2000毫秒。

至此，我们已经完成了一个简单的百叶窗效果。完整代码如下：

var blinds = $('.blinds');
var height = blinds.height() / blinds.find('li').length;

blinds.find('li').each(function(index, element) {
  $(element)
    .css({ top: -index * height, zIndex: index })
    .animate({ top: '+=' + $(this).height()}, 2000);
});

示例说明

示例一

为了更好地理解如何实现百叶窗效果，我们来看一个具体的示例：实现 mouseover 动作下的百叶窗效果。

var blinds = $('.blinds');
var height = blinds.height() / blinds.find('li').length;

blinds.find('li').each(function(index, element) {
  $(element).hover(function() {
    $(this).animate({ top: 0 }, 1000);
  }, function() {
    $(this).animate({ top: -index * height }, 1000);
  }).css({ top: -index * height, zIndex: index });
});

在上述代码中，我们使用了 hover() 方法，让每个条纹在 mouseover 动作下移动到目标位置，同时在 mouseout 动作下回到初始位置。mouseover 和 mouseout 的动作都使用 animate() 方法实现，移动的距离分别为0（目标位置）和负的 index * height（初始位置）。

完整代码见 JSFiddle。

示例二

除了使用 mouseover 动作外，我们还可以通过其他方式触发百叶窗效果。例如，我们可以使用定时器来实现百叶窗自动播放，即：每隔一段时间自动切换到下一张图片。代码如下：

var blinds = $('.blinds');
var height = blinds.height() / blinds.find('li').length;
var currentIndex = 0;

var timer = setInterval(function() {
  blinds.find('li').eq(currentIndex).animate({ top: 0 }, 1000, function() {
    $(this).css('zIndex', currentIndex);
  }).siblings().animate({ top: -height }, 1000);

  currentIndex++;
  if (currentIndex >= blinds.find('li').length) {
    currentIndex = 0;
  }
}, 2000);

在上述代码中，我们先定义一个 currentIndex 变量用于记录当前正在显示的图片。然后，我们使用 setInterval() 来创建一个定时器，每隔2000毫秒切换到下一张图片。

在 setInterval() 函数中，我们使用 eq() 方法获取当前条纹，并且切换到下一张图片。同时，我们还需要使当前条纹的 zIndex 属性等于当前索引值（currentIndex），以便创建堆叠效果。接着，我们使用 siblings() 方法来获取除了当前条纹以外的所有条纹，并且将它们移动到初始位置（负的 height 值）。

完整代码见 JSFiddle。

这个示例还可以进一步优化，例如增加左右切换按钮、自定义动画效果等。读者可以自行尝试。