来源自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