先展示一下效果:

Clock截图

 

数字滚动实现的方法是:在一个ul标签里面放两个li,一个li表示当前数字,另一个表示下一个数字。设置ul的属性隐藏超出边界的li,以确保只显示一个数字的位置。

滚动动画效果的实现:两个li同时滚动,超出ul区域的li会自动隐藏。当动画结束后,把向上移出去的li的位置设置到底部,并更新上面的数字,为下一次动画做好准备。

 

具体的实现细节,请参考代码:https://files.cnblogs.com/dc10101/ScrollClock.zip

posted on 2012-09-22 09:14  MainTao  阅读(825)  评论(0编辑  收藏  举报