有没有办法使用 jquery 循环创建类似于 Nivo Slider 的条形过渡效果? [英] Is there a way to create strip transition effects similar to Nivo Slider with jquery cycle?

问题描述

我是 jquery 循环插件的忠实粉丝，但如果它有它会很酷一些更复杂的过渡效果，类似于 Nivo Slider 或 jqFancyTransitions.

I'm a big fan of the jquery cycle plugin yet it would be cool if it had some more complex transition effects similar to Nivo Slider or jqFancyTransistions.

我了解如何使用 jquery 循环创建自定义效果的要点，但我很难弄清楚如何创建类似于 nivo 滑块和 jqfancytransitions 的条形过渡效果，或者在 jquery 中是否有可能循环.对此的任何帮助将不胜感激.谢谢！

I understand the jist of how to create custom effects with jquery cycle, yet I'm having a hard time trying to figure out how to create the strip transition effects similar to nivo slider and jqfancytransitions or if its possible at all in jquery cycle. Any help on this would be greatly appreciated. Thanks!

推荐答案

我已经做了一个 最小证明-概念演示.它是作为一个合适的 jQuery 循环转换插件编写的.

I've whipped up a minimal proof-of-concept demo. It's written as a proper jQuery cycle transition plugin.

根据您使用代码的愉快程度，它应该提供一个良好的起点.我自己已经开始从 shuffle 过渡开始工作，因为这似乎是唯一一个不只是操纵 CSS 属性的过渡，我认为这不足以满足您的目标.

Depending on how happy you are with playing with the code, it should provide a good starting point. I have started working from the shuffle transition myself, as that seemed to be the only transition that did more than to manipulate CSS properties, which I think doesn't suffice for what you were aiming for.

由于我之前没有使用过 jQuery Cycle，也没有为它编写过转换插件，我完全有可能在它的一些编写细节上犯了大罪.

Since I've neither used jQuery Cycle before, nor written transition plugins for it, it's entirely possible that I've committed cardinal sins in some details of how it's written.

此外，它肯定可以优化.在这个阶段，它首先是为了清晰，其次是性能.然而，在我(相当快的)机器上，动画和反应时间是流畅且瞬时的.

Also, it can surely be optimized. At this stage, it's written for clarity first, performance second. However, on my (rather fast) machine, the animation and reaction time are fluent and instantaneous.

所以，你有它.

演示页面现在包括额外公开选项的文档和一些演示如何只是通过不同的选项来实现一些不同的效果.

edit: The demo page now includes documentation for additionally exposed options and a few examples that demonstrate how to achieve some different effects just by passing different options.

编辑 2:我将条带概括为瓷砖，并在 演示页面上放置了更多示例.

edit 2: I have generalized the strips to tiles and put many more examples on the demo page.

这篇关于有没有办法使用 jquery 循环创建类似于 Nivo Slider 的条形过渡效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！