最优雅的方式来实现动画“滑动面板”

Question

我正在尝试实现与Aveda网站类似的动画“滑动面板”效果。

我对所有可用的选项和Javascript库感到不知所措。在检查了Aveda网站代码之后有点困惑。

有关如何处理此任务的任何建议吗？哪个Javascript / Effects库最合适？我对一个图书馆没有任何效忠或更多的经验。

我的要求是：

• 跨浏览器兼容性（当然）
• 简单＆amp;优雅的实施
• 不想重新发明轮子
• 能够通过鼠标点击动画和激活（如Aveda首页）
• 动态（不想在添加更多“面板”时修改javascript）

我的第一印象是使用Scriptaculous - Effect.Move，但我知道有像Spry's这样的现成实现。

这个Javascript新手会非常感谢任何智慧和建议。

Prembo。

Answer 1

使用jQuery

http://jqueryfordesigners.com/coda-slider-effect/是一个很好的教程。

Answer 2

我喜欢http://www.davidmassiani.com/horinaja/

它可以使用鼠标滚轮以及在窗格之间滚动的链接，它可用于script.aculo.us和jQuery。

我会推荐后者，因为它重量轻，易于学习/处理。

Answer 3

我喜欢Aveda实现这种效果的方式。他们使用原型/ scriptaculous，这是一个自定义实现。

Aveda效应被称为旋转木马。 Aveda轮播滚动到计时器上的下一个元素，并具有良好的非线性过渡。

+1给Deefjuh，我认为Horinaja会做你想做的事情并且最容易实现。

如果你想要更多的挑战，我已经使用PrototypeUI（http://www.prototype-ui.com/）Carousel为项目做了一系列旋转木马（例如http://teacher.scholastic.com/products/classmags.asp）但是点指针控件必须是自定义编程的。