先展示一下效果:
数字滚动实现的方法是:在一个ul标签里面放两个li,一个li表示当前数字,另一个表示下一个数字。设置ul的属性隐藏超出边界的li,以确保只显示一个数字的位置。
滚动动画效果的实现:两个li同时滚动,超出ul区域的li会自动隐藏。当动画结束后,把向上移出去的li的位置设置到底部,并更新上面的数字,为下一次动画做好准备。
具体的实现细节,请参考代码:https://files.cnblogs.com/dc10101/ScrollClock.zip
先展示一下效果:
数字滚动实现的方法是:在一个ul标签里面放两个li,一个li表示当前数字,另一个表示下一个数字。设置ul的属性隐藏超出边界的li,以确保只显示一个数字的位置。
滚动动画效果的实现:两个li同时滚动,超出ul区域的li会自动隐藏。当动画结束后,把向上移出去的li的位置设置到底部,并更新上面的数字,为下一次动画做好准备。
具体的实现细节,请参考代码:https://files.cnblogs.com/dc10101/ScrollClock.zip