Apple.com/iphone幻灯片:它是如何工作的



所以这更多的是一个好奇的问题,而不是一个实际的问题,所以请原谅我。我刚检查过:

http://www.apple.com/iphone/

封面的幻灯片看起来真的让我印象深刻。我不想复制它,但我只是真正感兴趣的是它是如何工作的。从我的检查,他们只是使用一堆定时webkit过渡/转换,但我不知道到底是怎么回事。

还有,有没有一种简单的方法来创建这种行为,而不需要硬编码,因为这就是我现在要做的。

解释如下:http://johnbhall.com/iphone-4s/

我只是在回答我自己的问题,因为除了硬编码之外,没有人能真正给我一个答案。我猜苹果在这方面下了不少功夫。我仍然对CSS过渡的复杂使用印象深刻,特别是对象将过渡到下一帧

这是一个带有源代码的工作演示。

基本意思是,

  • 预加载所有图片

  • 有一个计时器,每N秒触发一次

  • 当计时器触发时,启动转换动画,将新图像滑动进来。


对想法的细化允许你停止/反转/暂停/恢复,在一个循环后自动停止,等等。


这个效果的商标名是"slider"。你可以谷歌滑块,找到很多讨论。有用于jquery的滑块(nivoslider),有用于mootools的滑块(slideitmooo),还有与框架无关的选项(如我链接的脚本演示),等等。

最新更新