移动端的划动时间选择器
在工作当中，遇见了一个UI效果，是让用户划动选择1到12小时，在网上没有找到现成的，就自己写了一个，基本可以满足效果，GitHub地址：https://github.com/Jin0811/TimePicker.git，样式如下：
这个选择器只适合移动端的使用，PC端不能使用，用户在划动的时候，样式也会相应地发生变化。’
所有的样式和代码，都放在了我的GitHub上面，这里大概说一下我实现的想法，要注意的时，我只是写了个弹出层的样子，并没有写弹出层。
页面当中，一共有14个li，其中第一个和最后一个li是空白的，作用就是占位，可以让第一个和最后一个小时滑动到中间部位。
可以看到每一次滑动，都会刚好到一个li的位置上，这个利用了ontouchend事件，在用户停止划动之后，检查ul的scrollTop值，再与刚好到每一个li的scrollTop相比，离哪个值比较近就让ul滚动到哪个值。
例如，初始时ul的scrollTop为0，此时显示的是1小时，一个li的高度为30，那么当ul的scrollTop为30时，显示的就是2小时，为60时就是3小时，那么当ul停止滑动时的scrollTop小于15时，就让它的值为0，当大于15，小于45时，让ul的scrollTop值为30，显示第二个，依次类推。
ontouchmove事件主要用于用户在划动的过程当中，修改当前li以及当前li前两个和后两个li的样式。
| 范围 | 对应scrollTop值 | 对应的小时 |
|---|---|---|
| 0-15 | 0 | 1 |
| 15-45 | 30 | 2 |
| 45-75 | 60 | 3 |
| 75-105 | 90 | 4 |
| 105-135 | 120 | 5 |
| 135-165 | 150 | 6 |
| 165-195 | 180 | 7 |
| 195-225 | 210 | 8 |
| 225-255 | 240 | 9 |
| 255-285 | 270 | 10 |
| 285-315 | 300 | 11 |
| 315-345 | 330 | 12 |
注意
- 在使用之前必须先引入jquery
- 这里的小时可以变为月份，其他的城市、分钟选择器应该也可以进行修改
- 每个li的高度可以改变，但是CSS当中一些样式也要进行改变，我进行了标注