product browser effect in Apple Mac page

apple mac 页的产品浏览是CSS3渐近增强的一个很好应用，主要用了transition，当然像border-radius、box-shadow、rgba等的的运用就随处可见了。在chorme下这个产品浏览区的transition方式给我感觉很好，可惜在不支持transition的浏览器中，就没法看到效果了。便用JS写了个类似效果(这里显示宽度不够，把原来的1000px设成了800px)。

记：

分析了所有能找到的tween算法，都没有很稳合的。就Elastic算法有点像，但无论我怎么调整参数，其函数曲线都不是在想要的结果。用google尽数学资料还是没找到合适的算法。正要黔驴技穷时，突然发现可以用两个tween算法组合，而且思路确实可行。由于早时自己封装的动画工具，对同一个元素上的动画采用的是overwrite机制，没有实现queue。jquery的动画用了queue，但easing属性里只有linear和swing两个算法。便用可能用到的tween算法扩展了jquery 的easing。经过尝试发现cubicEaseOut,cubicEaseIn和elasticEaseOut三个tween能较好的用来实现。

原码下载
posted @ 2011-08-30 22:35  only sea  阅读(319)  评论(0)  编辑  收藏  举报