小时的数字选择到0的时候上面已经没有数字可以选择了，但是分钟不一样，还可以往上选从59开始循环，这是怎么实现的，并且数字转动到框里面样式发生改变，是怎么确定该数字转到了框里的
1 回答
扬帆大鱼
TA贡献1799条经验 获得超9个赞
写一下思路，首先：使用DIV+CSS+JS实现，不能用select；
数字是使用transform3d做的变形效果；
分钟滚动的动画效果由JS捕捉用户行为判断滑动距离，添加css动画transition配合transformY轴位移实现；
从0向上滚动到59需要复制一个组出来
DEMO里设定每分钟的高度是14px，初始化时的值translate3d(0,-112px,0);
这样一上来焦点就在0这个位置了，若想知道用户滚动的值是多少
就根据translate3d(0,-112px,0)的值/14（每分钟行的高度） 计算滑动到了第几个值
比如demo第一行是8 ，8*14 = 112
添加回答
举报
0/150
提交
取消