移动端的时间选择器_移动端时间选择器

移动端的划动时间选择器

  在工作当中，遇见了一个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的样式。

注意

• 在使用之前必须先引入jquery
• 这里的小时可以变为月份，其他的城市、分钟选择器应该也可以进行修改
• 每个li的高度可以改变，但是CSS当中一些样式也要进行改变，我进行了标注