【问题标题】:JS/JQuery Image transition effects - blinds?JS/JQuery 图像过渡效果——百叶窗?
【发布时间】:2010-09-30 23:52:37
【问题描述】:

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

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


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

【问题讨论】:

    标签: jquery flash image jquery-plugins transition


    【解决方案1】:

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

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

    【讨论】:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-03-18
      • 2016-09-16
      • 1970-01-01
      • 1970-01-01
      • 2012-05-17
      相关资源
      最近更新 更多