JS/JQuery 图像过渡效果——百叶窗？

Posted 2023-05-09

【中文标题】JS/JQuery 图像过渡效果——百叶窗？

【英文标题】：JS/JQuery Image transition effects - blinds?

【发布时间】：2010-09-30 23:52:37

【问题描述】：

我想要 2 个或更多图像之间的过渡效果。我知道在 JQuery 中可以轻松完成简单的转换，尤其是使用 Cycle 插件，但我想要更复杂的东西。 Like this，虽然这是一个糟糕的例子。一种“百叶窗”风格的效果，您可以在其中看到一个图像，因为它发生变化。我希望我很清楚。

如果可能的话，我真的很想避免使用 Flash。

---

我已经用过几次animate。我想要的是一种实现我链接到的过渡风格的方法，无论是现成的还是有一点帮助的。我的问题是图像本质上是分裂的，而不仅仅是移动的。也许有一种使用面具的方法？

【参考方案1】：

仅使用 javascript 几乎不可能实现对角百叶窗。我可以想出几种方法来处理图像文件，但这将是一个神圣的技巧，而且动画不太可能是流畅的。可能有办法用画布来做，但这也会让人头疼，因为你必须使用 canvas->vml 才能使它与 IE 一起工作。

如果您对水平/垂直百叶窗没问题，只需附加一堆 div 并为宽度/高度设置动画。

【讨论】：

+1 对角百叶窗几乎不可能做到正确，尤其是让它们与跨浏览器兼容。但是垂直或水平百叶窗应该没问题。确保在每个子 div 中将新图像偏移适当的量，然后缩小/扩大它们。

【参考方案2】：

如果你对垂直百叶窗选项没问题，现在有一个非常漂亮的 jQuery 插件可以实现你想要的效果：http://nivo.dev7studios.com