仿苹果的产品展示菜单（横向滚动）

来源自apple.com/mac/

在分析了其官方网站的代码后，跟据自已的理解，重新给实现了一下。苹果官网的做法是用的html 5的css分帧动画，而我现在还没有学到这里，所以动画部分用js实现，同样模仿分帧动画，因为分帧比即使计算轨迹要快，省资源。

第一部，静态布局

重新布局，但是方法基本没有变，边框跟阴影都是css3 实现，不兼容旧的IE浏览器。

第二部 计算滚动的分步曲线参数。

下面的分栏索引上面的箭头是慢起慢停的动画效果，曲线是

图标是慢起，然后弹性停止。曲线是

把两种曲线的分步移动每一步移动的距离除以整个移动长度的百分比存入常数数组

var SISO = [0.024, 0.093, 0.205, 0.343, 0.5, 0.657, 0.795, 0.907, 0.976, 1];

var BOUND = [0.028, 0.091, 0.19, 0.325, 0.496, 0.691, 0.856, 0.985, 1.073, 1.115, 1.114, 1.085, 1.032, 0.965, 0.939, 0.950, 0.987, 1.029, 1.028, 0.999, 0.986, 1.005, 1];

然后，根据这个参数，在点击切换触发后，一步步完成菜单的滚动切换。

源码在我的资源下载中 http://download.csdn.net/detail/qlfxjh/5161335

欢迎下载，并提意见