前言
小伙伴们好，很久不见了。最近工作进入正常期了，所以慢慢的悠闲的时间久没有了，所以不能每天水一篇了。
最近也在听师傅（http://home.cnblogs.com/u/aaronjs/）的教导开始阅读jquery源码了，怎么说呢，阅读的效果其实不是太好。
一来是时间断断续续的没有接上，今天读完明天又忘了，到第三天再读的话，就很多都忘记了；
二来是jquery其实还是有一定难度，加之篇幅也很长，所以读起来还是有一点吃力（我甚至有时候有种想睡的感觉），过了2星期才陆陆续续把core读完，结果很多都无法理解，再加油吧。
反正今年的目标就是把jquery读懂，时间多，不着急了。
时间比较紧未做兼容处理，请使用手机/或者使用chrome开启touch功能查看，后期补上兼容方案，以及修复BUG
关于工作
最近工作上需要在我们的网页上加入一些动画：
① 页面的切入切出的转场动画
② 模仿一个iphone的日历控件
转场动画做的时候其实碰到了很多坑，而且最后做出的效果也一般，因为既有的框架与dom结构已经出来了好久了，改不得，而且就算改了效果也不能保证好，所以暂时放下
这里说的仿iphone日历控件，不如说模仿一个单选框来的实在，而且我这里说是插件，完全就算标题党了，各位可以忽视，所以今日正题吧。
iphone的感觉
第一步我们要找到iphone的感觉，那么iphone是个什么感觉呢：
大概是这么个感觉，但是我做出来却变成了这种感觉，将就着看吧：
总体思路
PS：现在其实正在写功能代码，所以，现在我们是边写边做的，思路乱了各位请包涵
测试代码
这个代码很烂，各位就不要看了，我都不知道怎么写出来的，后面点整理吧，里面的CSS不想写就直接拿别人的用了
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6
7 /*reset*/
8 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
9 body,button,input,select,textarea{font:normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft YaHei",hei;}
10 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,iframe{display:block;}
11 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}
12 address,cite,dfn,em,var,i{font-style:normal;font-weight:normal;font-family:arial;}
13 ul,ol{list-style:none}
14 a{color:#000;text-decoration:none}
15 a:hover{text-decoration:underline;-webkit-transition:color .2s linear;-moz-transition:color .2s linear;-ms-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear;}
16 fieldset,img,button,input{border:0}
17 button,input,select,textarea{font-size:100%}
18 table{border-collapse:collapse;border-spacing:0}
19 input[type="button"],input[type="submit"]{-webkit-appearance:none;}
20 body{min-width:320px; background:#f5f5f5;overflow-x:hidden;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:subpixel-antialiased;-moz-user-select:none;color:#000;}:focus{outline:none;}.clearfix:after{clear:both;content:'.';display:block;height:0;visibility:hidden;line-height:0;}.clearfix{*zoom:1;}.fl{float:left;}.fr{float:right;}.clear{clear:both;}.overflow{overflow:hidden;}.ellips{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.ellips_line2,.ellips_line3{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;}.ellips_line2{-webkit-line-clamp:2;}.ellips_line3{-webkit-line-clamp:3;}.pos_rel{position:relative;}
21 html,body,.h100{ height:100%; }
22 dfn{color:#ff9913; font-size:12px; font-weight:normal;}
23 /*-----------------------------------------common--------------------*/
24 .i,.i_bef:before,.i_aft:after,.carlist li:before,.ok_crt:after{background:url(../img/style1/v2_bgs.png) no-repeat; background-size:175px 125px;}
25 .i_bef:before,.i_aft:after,.carlist li:before{position: absolute;content: "";}
26 .abs_size{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
27 .opacity{opacity:0.7; filter:alpha(opacity=70);}
28
29 /*active*/
30 .list_st_border li:active,.p_hinttxt:active,.search_cancel:active,.citylist dd:active{ background:#f8f8f8;}
31 .btn_yellow:active{background:#eb840f;}
32
33 /*layout*/
34 .wrap{margin-top:48px;}
35 .wrap_pb{margin-top:48px; padding-bottom:45px;}
36 .p10{padding:10px;}
37 .hm{text-align:center;}
38 .break_all{word-break:break-all;}
39 .fix_b{position:fixed; bottom:0; left:0;z-index:9999;}
40
41 /*font bg color size*/
42 h1{font:normal 1.286em/1.5 "";}/*18px*/
43 h2{font:normal 1.143em/1.5 "";}/*16px*/
44 h3{font:600 1em/1.5 "";}/*14px*/
45 .price{margin-left:5px;}
46 .price i{margin-left:2px; font-size:1.286em;}
47 .greyfont{color:#686868;}
48 .greyfont1{color:#909090;}
49 .bggrey{height:100%; background:#f5f5f5;}
50
51 /*header*/
52 header{position:fixed; top:0; left:0; z-index:9999; width:100%; height:48px;background-color:#1491c5;}
53 .returnico{position:absolute; left:0; top:0; width:68px; height:48px; background-color:#15a4d5;}
54 .returnico:before{left:25px;top:16px;width:12px;height:20px; background-position:0 0;}
55 .icon_phone,.icon_home{width:42px;height:100%;top:0;position:relative;float:right;}
56 .icon_phone:before{width:11px;height:20px;top:16px;right:12px;background-position:-115px -65px;}
57 .icon_home:before{width:20px;height:19px;top:16px;right:10px;background-position:-83px -66px;}
58 header i:active{opacity:0.7; filter:alpha(opacity=70);}
59 header h1{position:absolute; width:100%;line-height:48px; text-align:center; letter-spacing:2px; color: #fff;}
60 .header_r,.header_rs{position:absolute;z-index:9; top:0; right:0; line-height:48px; padding:0 15px; font-size:18px; background:#15a4d5; color:#fff;}
61 .header_rs{padding:0 5px; font-size:12px; }
62
63 /*background-position*/
64 .select_n:before{width:20px;height:20px;background-position:-18px 0;}
65 .select_n.current:before{background-position:-44px 0;}
66
67 /*searchbox*/
68 .search_wrap{overflow:hidden; padding:10px; background:#dfeaf1;}
69 .search_box{position:relative; float:left; width:100%;}
70 .search_input{width:100%; padding:0 10px 0 28px; line-height:30px; background-color:#fff; border-radius:4px; color:#ccc;}
71 .fdj:before,.fdj:after,.search_box:before,.search_box:after{position:absolute; content:""; z-index:9;}
72 .fdj:before,.search_box:before{left:5px; top:7px; width:12px; height:12px; border:1px solid #bcbcbc; border-radius:12px;}
73 .fdj:after,.search_box:after{left:19px; top:17px; width:1px; height:8px; background:#bcbcbc;}
74 .search_cancel{ display:none;float:left; width:20%; line-height:30px; text-align:center; font-size:16px;color:#1491c5; background:none; border:none;}
75 .close_icon{display:none; position:absolute; z-index:10; top:8px; right:4px; width:16px; height:16px; border-radius:30px; background:#b1b1b1;}
76 .close_icon:before,.close_icon:after{position:absolute; content:""; top:4px; left:7px; width:2px; height:8px; background:#fff; }
77 .close_icon:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
78 .fdj:after,.search_box:after,.close_icon:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
79 .search_focus .search_box{width:80%;}
80 .search_focus .close_icon, .search_focus .search_cancel{display:block;}
81 .search_input:focus{color:#000;}
82
83 /*tab*/
84 .tab{ background-color:#f8f8f8; border-bottom:1px solid #dfdfdf;}
85 .tab li{float:left; width:50%; height:39px; line-height:39px; text-align:center; border-right:1px solid #dfdfdf;}
86 .tab li:last-child{border-right:none;}
87 .tab li.tabcrt{ background-color:#dfdfdf;}
88
89 .tab_b{ background-color:#f5f5f5; border-bottom:1px solid #c1c1c1;}
90 .tab_b li{float:left; width:50%; height:39px; line-height:39px; text-align:center;}
91 .tab_b li:last-child{border-right:none;}
92 .tab_b li.tabcrt{color:#1491c5; border-bottom:4px solid #1491c5;}
93
94 /*list*/
95 .list_st_border{ background:#fff; border-bottom:none; border:1px solid #cfcfcf; }
96 .list_st_border li{position:relative;padding:0 10px; line-height:42px; border-bottom:1px solid #cfcfcf;}
97 .list_st_border li:last-child{border-bottom:none;}
98
99 .list_sli{padding:10px; overflow:hidden; border-bottom:1px solid #cfcfcf; background:#fff;}
100 .list_sli .list_sunit{float:left;}
101
102 .citylist{color:#000;}
103 .citylist dt,.citylist dd{padding-left:10px;border-bottom:1px solid #e2e2e2;}
104 .citylist dt{line-height:25px; background-color:#eaeaea;}
105 .citylist dd{position:relative; font-size:16px; line-height:43px; background-color:#fff;}
106 .citylist .ok_crt{color:#1491c5;}
107 .citylist .ok_crt:after{position:absolute;content:""; right:10px; top:50%; margin-top:-6px; width:12px; height:13px; background-position:-110px 0;}
108
109
110 /*arr*/
111 .li_arr_r{position:relative;}
112 .arr_r{position:absolute;right:0px; top:50%; width:30px; height:30px; margin-top:-15px; }
113 .arr_r:before,.arr_r:after,.li_arr_r:before,.li_arr_r:after{position: absolute; left:15px; content: "";width:2px; height:7px; background-color:#909090;}
114 .arr_r:before,.li_arr_r:before{top:10px;-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
115 .arr_r:after,.li_arr_r:after{top:15px;-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
116 .li_arr_r:before,.li_arr_r:after{left:auto; right:10px; top:50%; margin-top:-5px;}
117 .li_arr_r:after{margin-top:0;}
118
119 /*p*/
120 .p_grey{margin:10px 5px; font-size:13px; color:#989898;}
121 .p_grey_center{ text-align:center; margin:20px 5px; font-size:13px; color:#989898;}
122 .p_hinttxt{padding:20px 10px; text-align:center; font-size:16px; color:#1491c5;}
123
124
125 /*btn*/
126 .btn_yellow,.btn_del{width:100%; height:44px; line-height:42px; padding:0 10px; color:#fff;}
127 .btn_yellow{background:#ff9913;}
128 .btn_del{background:#ca4345;text-align:center;font-size:1.2em;}
129
130 .btn_pay{padding:0 20px;height:44px;float:right;background:#ff7d13;color:#fff;}
131 .btn_pay:active{background:#ff7300;}
132 .room_num {position:absolute; right:10px; width:100px; height:30px; line-height:30px;color:#000;background-color: #fff; text-align:center;border:#bfbfbf 1px solid;}
133 .room_num i{position:absolute; width:30px; height:30px; text-align:center; font:normal 2em/28px "Arial";}
134 .room_num i:first-child{left:0;background:#f4f4f4;color:#d9d9d9;font:normal 2.8em/25px "Arial";}
135 .room_num i:last-child{right:0;background:#06a2d0;color:#fff;}
136
137
138 /*日历*/
139 .cui_cldwrap{color:#000;}
140 .cui_cldweek{height:25px; overflow:hidden;font:normal 12px/24px "verdana";border-bottom:1px solid #c8c8c8;}
141 .cui_cldweek li{float:left; width:14%; text-align:center; }
142 .cui_cldweek li:first-child,.cui_cldweek li:last-child{width:15%; color:#acacac;}
143 .cui_cldmonth{height:35px;text-align:center;font:normal 16px/35px "verdana"; background:#fff;}
144 .cui_cldunit{margin-bottom:20px;}
145 .cui_cld_daybox{overflow:hidden; background:#fff;}
146 .cui_cld_daybox li{float:left; width:14%; height:45px; padding:4px 0; font:normal 12px/45px "verdana"; overflow:hidden; text-align:center;}
147 .cui_cld_daybox li:nth-child(7n),.cui_cld_daybox li:nth-child(7n+1){width:15%;}
148 .cui_cld_daypass{ background:#f7f7f7;}
149 .cui_cld_daycrt{background:#06a2d0; color:#fff;}
150 .cui_cld_dayfuture{background:#fff;}
151 .cui_cld_day_nocrtmonth{ visibility:hidden;}
152 .cui_cld_day_havetxt em{display:block; line-height:25px;}
153 .cui_cld_day_havetxt i{display:block;line-height:15px;}
154 .cui_cld_day_hint{color:#06a2d0;}
155 /*全局XXXX*/
156
157 /*弹出蓝色框*/
158 .cui-pop-box{background:#fff;}
159 .cui-text-center{text-align:center;}
160 .cui-pop-box .cui-hd{height:40px;line-height:40px;font-size:1.2em;color:#fff;background:#1491c5;padding:0 10px;position:relative;}
161 .cui-pop-box .cui-hd .cui-close{position:absolute;top:10px; right:10px; width:18px; height:18px;line-height:18px;border-radius:50%; background:#fff;color:#1491c5;text-align:center;font-weight:bold;}
162 .cui-error{width:150px;margin:auto;border-radius:5px;background:rgba(73,73,73,1);padding:10px;color:#fff;font-weight:700;text-align:center;word-break:break-all;}
163 .cui-select-view li{border-bottom:#dfdfdf 1px solid;padding:.8em 2em .8em .8em;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;position:relative;}
164 .cui-select-view li.current{color:#1084bc;}
165 .cui-select-view li:active{background:rgba(0,0,0,.05);}
166 .cui-select-view li.current:before,.cui-select-view li.current:after{position:absolute;content:"";background:#1084bc;height:3px;top:50%;border-radius:3px;}
167 .cui-select-view li.current:before{width:18px;right:10px;margin-top:-2px;-webkit-transform:rotate(-50deg);-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg);}
168 .cui-select-view li.current:after{width:9px;right:22px;margin-top:2px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
169
170 .cui-roller{width:100%;height:90px;overflow:hidden;position:relative;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
171 .cui-roller .ul-list{height:100%;text-align:center;font-size:1.1em;line-height:30px;-webkit-box-flex: 1;-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
172 .cui-mask{position:absolute;z-index:3;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
173 background: linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
174 background: -webkit-gradient(linear,left bottom,left top,from(#fff),color-stop(0.52,rgba(245,245,245,0)),color-stop(0.48,rgba(245,245,245,0)),to(#fff));
175 background: -webkit-linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
176 background: -moz-linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
177 }
178 .cui-lines{width:100%;height:34px;position:absolute;top:50%;margin-top:-17px;border-top:#dfdfdf 1px solid;border-bottom:#dfdfdf 1px solid;}
179 .cui-roller-tips{color:#8d8d8d;padding:5px;text-align:center;}
180 .cui-roller-btns{background:#f6f5f5;padding:10px;text-align:center;}
181 .cui-roller-btns span{width:45%;display:inline-block;padding:10px 0;color:#fff;}
182 .cui-roller-btns span:active{opacity:.75;}
183 .cui-roller-btns .cui-btns-cancel{background:#a9a9a9;margin-right:5%;}
184 .cui-roller-btns .cui-btns-sure{background:#ff9913;}
185
186 </style>
187 <script src="../zepto.js" type="text/javascript"></script>
188 </head>
189
190 <body id="ctripPage" onselectstart="return false">
191
192 <!--滚轮-->
193 <div class="cui-pop-box">
194 <div class="cui-hd"><div class="cui-text-center">滚轮滚轮滚轮</div></div>
195 <div class="cui-bd">
196 <div class="cui-roller">
197 <ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2; " >
198 <li>选项1</li>
199 <li>选项2</li>
200 <li>选项3</li>
201 <li>选项4</li>
202 <li>选项5</li>
203 <li>选项6</li>
204 <li>选项7</li>
205 <li>选项8</li>
206 <li>选项9</li>
207 <li>选项10</li>
208 <li>选项11</li>
209 <li>选项12</li>
210 <li>选项13</li>
211 <li>选项14</li>
212 <li>选项15</li>
213 <li>选项16</li>
214 <li>选项17</li>
215 <li>选项18</li>
216 <li>选项19</li>
217 <li>选项20</li> <li>选项1</li>
218 <li>选项2</li>
219 <li>选项3</li>
220 <li>选项4</li>
221 <li>选项5</li>
222 <li>选项6</li>
223 <li>选项7</li>
224 <li>选项8</li>
225 <li>选项9</li>
226 <li>选项10</li>
227 <li>选项11</li>
228 <li>选项12</li>
229 <li>选项13</li>
230 <li>选项14</li>
231 <li>选项15</li>
232 <li>选项16</li>
233 <li>选项17</li>
234 <li>选项18</li>
235 <li>选项19</li>
236 <li>选项20</li>
237 </ul>
238
239 <div class="cui-mask" style=""></div>
240 <div class="cui-lines"> </div>
241 </div>
242 <p class="cui-roller-tips">提示信息</p>
243 <div class="cui-roller-btns">
244 <span class="cui-btns-cancel">取消</span><span class="cui-btns-sure">确定</span>
245 </div>
246 </div>
247 </div>
248
249
250 <script type="text/javascript">
251
252 // var myScroll = new iScroll('wl1');
253
254
255
256
257 var y1 = 0, y2 = 0;
258 var moveAble = false;
259 var dragEl = null;
260 var parent = $('.cui-roller');
261 var offset;
262 var el_top = 0;
263 var o_top = 0;
264 var t1 = 0, t2 = 0;
265 var timer = null;
266
267 document.addEventListener("touchstart", touchStart, false);
268 document.addEventListener("touchend", touchEnd, false);
269 document.addEventListener("touchmove", touchMove, false);
270
271 function touchStart(e) {
272 t1 = e.timeStamp;
273 var srcElement = $(e.srcElement), pos;
274 dragEl = $(e.srcElement).parent();
275 if (dragEl.hasClass('ul-list')) {
276 var pos = getMousePos(e.changedTouches[0]);
277
278 offset = dragEl.offset();
279 y1 = pos.top - offset.top;
280 var top = parseFloat(dragEl.css('top')) || 0;
281 o_top = top;
282 y1 = y1 - parseFloat(top);
283 moveAble = true;
284 }
285 }
286
287 function touchMove(e) {
288 if (!dragEl || !moveAble) return false;
289 var pos = getMousePos(e.changedTouches[0]);
290 y2 = pos.top - y1 - offset.top;
291
292 if (timer) clearTimeout(timer);
293
294
295 el_top = y2;
296 dragEl.css('top', y2 + 'px');
297 e.preventDefault();
298 }
299
300
301 function touchEnd(e) {
302 t2 = e.timeStamp - t1;
303 var flag = o_top <= el_top ? 1 : -1;
304 var flag2 = el_top > 0 ? 1 : -1;
305
306 el_top = Math.abs(el_top);
307 var mod = el_top % 30;
308 el_top = (parseInt(el_top / 30) * 30 + (mod > 15 ? 30 : 0)) * flag2;
309 if (t2 >= 200) {
310 dragEl.animate({
311 top: el_top + 'px'
312 }, 100, 'ease-in-out', function () {
313 if (el_top > 30) {
314 dragEl.animate({
315 top: '30px'
316 }, 10, 'ease-in-out');
317 }
318 if (el_top < 0 && (el_top + dragEl[0].scrollHeight < 60)) {
319 dragEl.animate({
320 top: '-' + (dragEl[0].scrollHeight - 60) + 'px'
321 }, 10, 'ease-in-out');
322 }
323 });
324 } else {
325 var step = parseInt(t2 / 50);
326 console.log(t2, step);
327
328 var param = [10, 6, 4, 2];
329 var _tmp = param[step] * 30 * flag;
330 _tmp = el_top + _tmp;
331 dragEl.animate({
332 top: (_tmp) + 'px'
333 }, 100 + (param[step] * 50), 'ease-in-out', function () {
334 if (_tmp > 30) {
335 dragEl.animate({
336 top: '30px'
337 }, 10, 'ease-in-out');
338 }
339 if (_tmp < 0 && (_tmp + dragEl[0].scrollHeight < 60)) {
340 dragEl.animate({
341 top: '-' + (dragEl[0].scrollHeight - 60) + 'px'
342 }, 10, 'ease-in-out');
343 }
344 });
345
346
347 }
348 moveAble = false;
349 }
350
351 function getMousePos(event) {
352 var top, left;
353 top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
354 left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
355 return {
356 top: top + event.clientY,
357 left: left + event.clientX
358 };
359 };
360
361 var s = '';
362
363 </script>
364
365 </body>
366 </html>
demo请按照图示观看
http://sandbox.runjs.cn/show/dkf9dkwq
关于iscroll
最开始我们总是喜欢找一些已经存在了的解决方案来试试，这样就比较简单了，但是iscroll有一定问题就是他太大了。
最简单的压缩了都快10k了，所以直接给毙了，这里暂时就用不到他了。
zepto的touch事件
我是一个喜欢偷懒的人，我看着zepto有touch事件，本来想拿来直接用用谁知道。。。
1 // Zepto.js
2 // (c) 2010-2012 Thomas Fuchs
3 // Zepto.js may be freely distributed under the MIT license.
4
5 ;(function($){
6 var touch = {},
7 touchTimeout, tapTimeout, swipeTimeout,
8 longTapDelay = 750, longTapTimeout
9
10 function parentIfText(node) {
11 return 'tagName' in node ? node : node.parentNode
12 }
13
14 function swipeDirection(x1, x2, y1, y2) {
15 var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2)
16 return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
17 }
18
19 function longTap() {
20 longTapTimeout = null
21 if (touch.last) {
22 touch.el.trigger('longTap')
23 touch = {}
24 }
25 }
26
27 function cancelLongTap() {
28 if (longTapTimeout) clearTimeout(longTapTimeout)
29 longTapTimeout = null
30 }
31
32 function cancelAll() {
33 if (touchTimeout) clearTimeout(touchTimeout)
34 if (tapTimeout) clearTimeout(tapTimeout)
35 if (swipeTimeout) clearTimeout(swipeTimeout)
36 if (longTapTimeout) clearTimeout(longTapTimeout)
37 touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null
38 touch = {}
39 }
40
41 $(document).ready(function(){
42 var now, delta
43
44 $(document.body)
45 .bind('touchstart', function(e){
46 now = Date.now()
47 delta = now - (touch.last || now)
48 touch.el = $(parentIfText(e.touches[0].target))
49 touchTimeout && clearTimeout(touchTimeout)
50 touch.x1 = e.touches[0].pageX
51 touch.y1 = e.touches[0].pageY
52 if (delta > 0 && delta <= 250) touch.isDoubleTap = true
53 touch.last = now
54 longTapTimeout = setTimeout(longTap, longTapDelay)
55 })
56 .bind('touchmove', function(e){
57 cancelLongTap()
58 touch.x2 = e.touches[0].pageX
59 touch.y2 = e.touches[0].pageY
60 if (Math.abs(touch.x1 - touch.x2) > 10)
61 e.preventDefault()
62 })
63 .bind('touchend', function(e){
64 cancelLongTap()
65
66 // swipe
67 if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
68 (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))
69
70 swipeTimeout = setTimeout(function() {
71 touch.el.trigger('swipe')
72 touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
73 touch = {}
74 }, 0)
75
76 // normal tap
77 else if ('last' in touch)
78
79 // delay by one tick so we can cancel the 'tap' event if 'scroll' fires
80 // ('tap' fires before 'scroll')
81 tapTimeout = setTimeout(function() {
82
83 // trigger universal 'tap' with the option to cancelTouch()
84 // (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
85 var event = $.Event('tap')
86 event.cancelTouch = cancelAll
87 touch.el.trigger(event)
88
89 // trigger double tap immediately
90 if (touch.isDoubleTap) {
91 touch.el.trigger('doubleTap')
92 touch = {}
93 }
94
95 // trigger single tap after 250ms of inactivity
96 else {
97 touchTimeout = setTimeout(function(){
98 touchTimeout = null
99 touch.el.trigger('singleTap')
100 touch = {}
101 }, 250)
102 }
103
104 }, 0)
105
106 })
107 .bind('touchcancel', cancelAll)
108
109 $(window).bind('scroll', cancelAll)
110 })
111
112 ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(m){
113 $.fn[m] = function(callback){ return this.bind(m, callback) }
114 })
115 })(Zepto)
这个就是zepto的touch事件，可以看到他只是对touchend有所监控，会触发一点点事件，所以和我们没有一毛钱关系
在此我便认命的自己敲下了以下代码：
1 document.addEventListener("touchstart", touchStart, false);
2 document.addEventListener("touchend", touchEnd, false);
3 document.addEventListener("touchmove", touchMove, false);
鼠标拖动
该功能的第一个技术点，便是元素跟着鼠标移动，拖到哪里就是哪里，这个大家都比较熟悉了，就不多说
touchend
当拖动结束时，我们要做很多后续的工作：
① 让选项进入既定的轨道
② 是否具有动画效果
③ 动画效果的步长等
PS：开始觉得有几个点可以说说，结果真的写出来却无话可说了，哎。。。。。。
经过以上版本，我们的粗制滥造版便出现了，就是以上的代码。
封装
于是我们就可以在这个基础上整理代码，封装起来了，请看下一步。
整理封装
首先，我们虽然写的不是插件，但是还是应该让他有插件的样子，来点简单的修饰吧。
经过一阶段的休整，我们的代码成了这个样子了：
1 (function () {
2 var ScrollRadio = function (opts) {
3 opts = opts || {};
4 //容器元素
5 this.wrapper = opts.wrapper || $(document);
6 this.body = [
7 '<div class="cui-roller">',
8 '<ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2; " >',
9 '</ul>',
10 '<div class="cui-mask"></div>',
11 '<div class="cui-lines"> </div>',
12 '</div>'
13 ].join('');
14 this.body = $(this.body);
15
16 //真正拖动的元素（现在是ul）
17 this.dragEl = this.body.find('.ul-list');
18 //数据源
19 this.data = opts.data || [];
20 this._changed = opts.changed || null;
21 //当前选项索引
22 this.selectedIndex = 0;
23 //当前选项值
24 this.key = '';
25 //当前选项显示的值
26 this.value = '';
27
28 /*
29 定位实际需要用到的信息
30 暂时不考虑水平移动吧
31 */
32 this.itemHeight = 0; //单个item高度
33 this.dragHeight = 0; //拖动元素高度
34 this.dragTop = 0; //拖动元素top
35 this.animateParam = [10, 8, 7, 6, 6, 6, 5, 5, 4, 2, 0]; //动画参数
36 this.timeGap = 0; //时间间隔
37 this.touchTime = 0; //开始时间
38 this.moveAble = false; //是否正在移动
39 this.moveState = 'up'; //移动状态，up right down left
40 this.oTop = 0; //拖动前的top值
41 this.curTop = 0; //当前容器top
42 this.mouseY = 0; //鼠标第一次点下时相对父容器的位置
43
44
45 this.init();
46 };
47 ScrollRadio.prototype = {
48 constructor: ScrollRadio,
49 init: function () {
50 this.initItem();
51 this.wrapper.append(this.body);
52 this.initEventParam();
53 this.bindEvent();
54
55 return this;
56 },
57 //增加数据
58 initItem: function () {
59 var _tmp, _data, i, k;
60 for (var i in this.data) {
61 _data = this.data[i]
62 _tmp = $('<li>' + (_data.val == undefined ? i : _data.val) + '</li>');
63 _tmp.attr('data-index', i);
64 for (k in _data) {
65 _tmp.attr('data-' + k, _data[k]);
66 }
67 this.dragEl.append(_tmp);
68 }
69 },
70 //初始化事件需要用到的参数信息
71 initEventParam: function () {
72 var offset = this.dragEl.offset();
73 var itemOffset = this.dragEl.find('li').eq(0).offset();
74 this.itemHeight = itemOffset.height
75 this.dragTop = offset.top;
76 this.dragHeight = this.dragEl[0].scrollHeight;
77 var s = '';
78 },
79 bindEvent: function () {
80 var scope = this;
81 document.addEventListener("touchstart", function (e) {
82 scope.touchStart.call(scope, e);
83 }, false);
84 document.addEventListener("touchend", function (e) {
85 scope.touchEnd.call(scope, e);
86 }, false);
87 document.addEventListener("touchmove", function (e) {
88 scope.touchMove.call(scope, e);
89 }, false);
90 },
91 touchStart: function (e) {
92 //需要判断是否是拉取元素，此处需要递归验证，这里暂时不管
93 //！！！！！！！！此处不严谨
94 var el = $(e.srcElement).parent(), pos;
95 if (el.hasClass('ul-list')) {
96 this.touchTime = e.timeStamp;
97 //获取鼠标信息
98 pos = this.getMousePos(e.changedTouches[0]);
99 //注意，此处是相对位置
100 this.mouseY = pos.top - this.curTop;
101 this.moveAble = true;
102 }
103 },
104 touchMove: function (e) {
105 if (!this.moveAble) return false;
106 var pos = this.getMousePos(e.changedTouches[0]);
107 //先获取相对容器的位置，在将两个鼠标位置相减
108 this.curTop = pos.top - this.mouseY;
109
110 this.dragEl.css('top', this.curTop + 'px');
111
112
113 e.preventDefault();
114 },
115 touchEnd: function (e) {
116 //时间间隔
117 var scope = this;
118 this.timeGap = e.timeStamp - this.touchTime;
119 var flag = this.oTop <= this.curTop ? 1 : -1; //判断是向上还是向下滚动
120 var flag2 = this.curTop > 0 ? 1 : -1; //这个会影响后面的计算结果
121 this.moveState = flag > 0 ? 'up' : 'down';
122 var ih = parseFloat(this.itemHeight);
123 var ih1 = ih / 2;
124
125 var top = Math.abs(this.curTop);
126 var mod = top % ih;
127 top = (parseInt(top / ih) * ih + (mod > ih1 ? ih : 0)) * flag2;
128
129 var step = parseInt(this.timeGap / 10 - 10);
130 step = step > 0 ? step : 0;
131 var speed = this.animateParam[step] || 0;
132 var increment = speed * ih * flag
133 top += increment;
134 this.dragEl.animate({
135 top: top + 'px'
136 }, 100 + (speed * 20), 'ease-in-out', function () {
137 if (top > ih) {
138 scope.dragEl.animate({
139 top: ih + 'px'
140 }, 10, 'ease-in-out');
141 }
142 if (top < 0 && (top + scope.dragHeight < ih * 2)) {
143 scope.dragEl.animate({
144 top: '-' + (scope.dragHeight - ih * 2) + 'px'
145 }, 10, 'ease-in-out');
146 }
147 });
148
149 console.log(this.timeGap, top, increment);
150
151 this.oTop = top;
152 this.curTop = top;
153 this.moveAble = false;
154
155 },
156 setKey: function (k) {
157
158 },
159 setVal: function (v) { },
160 setIndex: function (i) {
161
162 },
163 getSelected: function () {
164
165 },
166 getByKey: function (k) { },
167 getByVal: function (v) { },
168 getByIndex: function (i) { },
169
170 //选项改变时候触发
171 changed: function () {
172
173 },
174 //获取鼠标信息
175 getMousePos: function (event) {
176 var top, left;
177 top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
178 left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
179 return {
180 top: top + event.clientY,
181 left: left + event.clientX
182 };
183 }
184
185 };
186
187
188 window.ScrollRadio = ScrollRadio;
189
190 })();
191
192 var data = [];
193 for (var i = 0; i < 100; i++) {
194 var temp = { val: '选项-' + i };
195 data.push(temp);
196 }
197
198
199
200 var myScroll = new ScrollRadio({
201 wrapper: $('#ctripPage'),
202 data: data
203 });
204
205
206 var s = '';
http://sandbox.runjs.cn/show/biousc1u
其中动画步长可以自己调节，选一个自己认为合适的，下面接着更新。
设置/获取
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6
7 /*reset*/
8 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
9 body,button,input,select,textarea{font:normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft YaHei",hei;}
10 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,iframe{display:block;}
11 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}
12 address,cite,dfn,em,var,i{font-style:normal;font-weight:normal;font-family:arial;}
13 ul,ol{list-style:none}
14 a{color:#000;text-decoration:none}
15 a:hover{text-decoration:underline;-webkit-transition:color .2s linear;-moz-transition:color .2s linear;-ms-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear;}
16 fieldset,img,button,input{border:0}
17 button,input,select,textarea{font-size:100%}
18 table{border-collapse:collapse;border-spacing:0}
19 input[type="button"],input[type="submit"]{-webkit-appearance:none;}
20 body{min-width:320px; background:#f5f5f5;overflow-x:hidden;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:subpixel-antialiased;-moz-user-select:none;color:#000;}:focus{outline:none;}.clearfix:after{clear:both;content:'.';display:block;height:0;visibility:hidden;line-height:0;}.clearfix{*zoom:1;}.fl{float:left;}.fr{float:right;}.clear{clear:both;}.overflow{overflow:hidden;}.ellips{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.ellips_line2,.ellips_line3{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;}.ellips_line2{-webkit-line-clamp:2;}.ellips_line3{-webkit-line-clamp:3;}.pos_rel{position:relative;}
21 html,body,.h100{ height:100%; }
22 dfn{color:#ff9913; font-size:12px; font-weight:normal;}
23 /*-----------------------------------------common--------------------*/
24 .i,.i_bef:before,.i_aft:after,.carlist li:before,.ok_crt:after{background:url(../img/style1/v2_bgs.png) no-repeat; background-size:175px 125px;}
25 .i_bef:before,.i_aft:after,.carlist li:before{position: absolute;content: "";}
26 .abs_size{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
27 .opacity{opacity:0.7; filter:alpha(opacity=70);}
28
29 /*active*/
30 .list_st_border li:active,.p_hinttxt:active,.search_cancel:active,.citylist dd:active{ background:#f8f8f8;}
31 .btn_yellow:active{background:#eb840f;}
32
33 /*layout*/
34 .wrap{margin-top:48px;}
35 .wrap_pb{margin-top:48px; padding-bottom:45px;}
36 .p10{padding:10px;}
37 .hm{text-align:center;}
38 .break_all{word-break:break-all;}
39 .fix_b{position:fixed; bottom:0; left:0;z-index:9999;}
40
41 /*font bg color size*/
42 h1{font:normal 1.286em/1.5 "";}/*18px*/
43 h2{font:normal 1.143em/1.5 "";}/*16px*/
44 h3{font:600 1em/1.5 "";}/*14px*/
45 .price{margin-left:5px;}
46 .price i{margin-left:2px; font-size:1.286em;}
47 .greyfont{color:#686868;}
48 .greyfont1{color:#909090;}
49 .bggrey{height:100%; background:#f5f5f5;}
50
51 /*header*/
52 header{position:fixed; top:0; left:0; z-index:9999; width:100%; height:48px;background-color:#1491c5;}
53 .returnico{position:absolute; left:0; top:0; width:68px; height:48px; background-color:#15a4d5;}
54 .returnico:before{left:25px;top:16px;width:12px;height:20px; background-position:0 0;}
55 .icon_phone,.icon_home{width:42px;height:100%;top:0;position:relative;float:right;}
56 .icon_phone:before{width:11px;height:20px;top:16px;right:12px;background-position:-115px -65px;}
57 .icon_home:before{width:20px;height:19px;top:16px;right:10px;background-position:-83px -66px;}
58 header i:active{opacity:0.7; filter:alpha(opacity=70);}
59 header h1{position:absolute; width:100%;line-height:48px; text-align:center; letter-spacing:2px; color: #fff;}
60 .header_r,.header_rs{position:absolute;z-index:9; top:0; right:0; line-height:48px; padding:0 15px; font-size:18px; background:#15a4d5; color:#fff;}
61 .header_rs{padding:0 5px; font-size:12px; }
62
63 /*background-position*/
64 .select_n:before{width:20px;height:20px;background-position:-18px 0;}
65 .select_n.current:before{background-position:-44px 0;}
66
67 /*searchbox*/
68 .search_wrap{overflow:hidden; padding:10px; background:#dfeaf1;}
69 .search_box{position:relative; float:left; width:100%;}
70 .search_input{width:100%; padding:0 10px 0 28px; line-height:30px; background-color:#fff; border-radius:4px; color:#ccc;}
71 .fdj:before,.fdj:after,.search_box:before,.search_box:after{position:absolute; content:""; z-index:9;}
72 .fdj:before,.search_box:before{left:5px; top:7px; width:12px; height:12px; border:1px solid #bcbcbc; border-radius:12px;}
73 .fdj:after,.search_box:after{left:19px; top:17px; width:1px; height:8px; background:#bcbcbc;}
74 .search_cancel{ display:none;float:left; width:20%; line-height:30px; text-align:center; font-size:16px;color:#1491c5; background:none; border:none;}
75 .close_icon{display:none; position:absolute; z-index:10; top:8px; right:4px; width:16px; height:16px; border-radius:30px; background:#b1b1b1;}
76 .close_icon:before,.close_icon:after{position:absolute; content:""; top:4px; left:7px; width:2px; height:8px; background:#fff; }
77 .close_icon:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
78 .fdj:after,.search_box:after,.close_icon:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
79 .search_focus .search_box{width:80%;}
80 .search_focus .close_icon, .search_focus .search_cancel{display:block;}
81 .search_input:focus{color:#000;}
82
83 /*tab*/
84 .tab{ background-color:#f8f8f8; border-bottom:1px solid #dfdfdf;}
85 .tab li{float:left; width:50%; height:39px; line-height:39px; text-align:center; border-right:1px solid #dfdfdf;}
86 .tab li:last-child{border-right:none;}
87 .tab li.tabcrt{ background-color:#dfdfdf;}
88
89 .tab_b{ background-color:#f5f5f5; border-bottom:1px solid #c1c1c1;}
90 .tab_b li{float:left; width:50%; height:39px; line-height:39px; text-align:center;}
91 .tab_b li:last-child{border-right:none;}
92 .tab_b li.tabcrt{color:#1491c5; border-bottom:4px solid #1491c5;}
93
94 /*list*/
95 .list_st_border{ background:#fff; border-bottom:none; border:1px solid #cfcfcf; }
96 .list_st_border li{position:relative;padding:0 10px; line-height:42px; border-bottom:1px solid #cfcfcf;}
97 .list_st_border li:last-child{border-bottom:none;}
98
99 .list_sli{padding:10px; overflow:hidden; border-bottom:1px solid #cfcfcf; background:#fff;}
100 .list_sli .list_sunit{float:left;}
101
102 .citylist{color:#000;}
103 .citylist dt,.citylist dd{padding-left:10px;border-bottom:1px solid #e2e2e2;}
104 .citylist dt{line-height:25px; background-color:#eaeaea;}
105 .citylist dd{position:relative; font-size:16px; line-height:43px; background-color:#fff;}
106 .citylist .ok_crt{color:#1491c5;}
107 .citylist .ok_crt:after{position:absolute;content:""; right:10px; top:50%; margin-top:-6px; width:12px; height:13px; background-position:-110px 0;}
108
109
110 /*arr*/
111 .li_arr_r{position:relative;}
112 .arr_r{position:absolute;right:0px; top:50%; width:30px; height:30px; margin-top:-15px; }
113 .arr_r:before,.arr_r:after,.li_arr_r:before,.li_arr_r:after{position: absolute; left:15px; content: "";width:2px; height:7px; background-color:#909090;}
114 .arr_r:before,.li_arr_r:before{top:10px;-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
115 .arr_r:after,.li_arr_r:after{top:15px;-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
116 .li_arr_r:before,.li_arr_r:after{left:auto; right:10px; top:50%; margin-top:-5px;}
117 .li_arr_r:after{margin-top:0;}
118
119 /*p*/
120 .p_grey{margin:10px 5px; font-size:13px; color:#989898;}
121 .p_grey_center{ text-align:center; margin:20px 5px; font-size:13px; color:#989898;}
122 .p_hinttxt{padding:20px 10px; text-align:center; font-size:16px; color:#1491c5;}
123
124
125 /*btn*/
126 .btn_yellow,.btn_del{width:100%; height:44px; line-height:42px; padding:0 10px; color:#fff;}
127 .btn_yellow{background:#ff9913;}
128 .btn_del{background:#ca4345;text-align:center;font-size:1.2em;}
129
130 .btn_pay{padding:0 20px;height:44px;float:right;background:#ff7d13;color:#fff;}
131 .btn_pay:active{background:#ff7300;}
132 .room_num {position:absolute; right:10px; width:100px; height:30px; line-height:30px;color:#000;background-color: #fff; text-align:center;border:#bfbfbf 1px solid;}
133 .room_num i{position:absolute; width:30px; height:30px; text-align:center; font:normal 2em/28px "Arial";}
134 .room_num i:first-child{left:0;background:#f4f4f4;color:#d9d9d9;font:normal 2.8em/25px "Arial";}
135 .room_num i:last-child{right:0;background:#06a2d0;color:#fff;}
136
137
138 /*日历*/
139 .cui_cldwrap{color:#000;}
140 .cui_cldweek{height:25px; overflow:hidden;font:normal 12px/24px "verdana";border-bottom:1px solid #c8c8c8;}
141 .cui_cldweek li{float:left; width:14%; text-align:center; }
142 .cui_cldweek li:first-child,.cui_cldweek li:last-child{width:15%; color:#acacac;}
143 .cui_cldmonth{height:35px;text-align:center;font:normal 16px/35px "verdana"; background:#fff;}
144 .cui_cldunit{margin-bottom:20px;}
145 .cui_cld_daybox{overflow:hidden; background:#fff;}
146 .cui_cld_daybox li{float:left; width:14%; height:45px; padding:4px 0; font:normal 12px/45px "verdana"; overflow:hidden; text-align:center;}
147 .cui_cld_daybox li:nth-child(7n),.cui_cld_daybox li:nth-child(7n+1){width:15%;}
148 .cui_cld_daypass{ background:#f7f7f7;}
149 .cui_cld_daycrt{background:#06a2d0; color:#fff;}
150 .cui_cld_dayfuture{background:#fff;}
151 .cui_cld_day_nocrtmonth{ visibility:hidden;}
152 .cui_cld_day_havetxt em{display:block; line-height:25px;}
153 .cui_cld_day_havetxt i{display:block;line-height:15px;}
154 .cui_cld_day_hint{color:#06a2d0;}
155 /*全局XXXX*/
156
157 /*弹出蓝色框*/
158 .cui-pop-box{background:#fff;}
159 .cui-text-center{text-align:center;}
160 .cui-pop-box .cui-hd{height:40px;line-height:40px;font-size:1.2em;color:#fff;background:#1491c5;padding:0 10px;position:relative;}
161 .cui-pop-box .cui-hd .cui-close{position:absolute;top:10px; right:10px; width:18px; height:18px;line-height:18px;border-radius:50%; background:#fff;color:#1491c5;text-align:center;font-weight:bold;}
162 .cui-error{width:150px;margin:auto;border-radius:5px;background:rgba(73,73,73,1);padding:10px;color:#fff;font-weight:700;text-align:center;word-break:break-all;}
163 .cui-select-view li{border-bottom:#dfdfdf 1px solid;padding:.8em 2em .8em .8em;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;position:relative;}
164 .cui-select-view li.current{color:#1084bc;}
165 .cui-select-view li:active{background:rgba(0,0,0,.05);}
166 .cui-select-view li.current:before,.cui-select-view li.current:after{position:absolute;content:"";background:#1084bc;height:3px;top:50%;border-radius:3px;}
167 .cui-select-view li.current:before{width:18px;right:10px;margin-top:-2px;-webkit-transform:rotate(-50deg);-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg);}
168 .cui-select-view li.current:after{width:9px;right:22px;margin-top:2px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
169
170 .cui-roller{width:100%;height:90px;overflow:hidden;position:relative;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
171 .cui-roller .ul-list{height:100%;text-align:center;font-size:1.1em;line-height:30px;-webkit-box-flex: 1;-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
172 .cui-mask{position:absolute;z-index:3;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
173 background: linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
174 background: -webkit-gradient(linear,left bottom,left top,from(#fff),color-stop(0.52,rgba(245,245,245,0)),color-stop(0.48,rgba(245,245,245,0)),to(#fff));
175 background: -webkit-linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
176 background: -moz-linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
177 }
178 .cui-lines{width:100%;height:34px;position:absolute;top:50%;margin-top:-17px;border-top:#dfdfdf 1px solid;border-bottom:#dfdfdf 1px solid;}
179 .cui-roller-tips{color:#8d8d8d;padding:5px;text-align:center;}
180 .cui-roller-btns{background:#f6f5f5;padding:10px;text-align:center;}
181 .cui-roller-btns span{width:45%;display:inline-block;padding:10px 0;color:#fff;}
182 .cui-roller-btns span:active{opacity:.75;}
183 .cui-roller-btns .cui-btns-cancel{background:#a9a9a9;margin-right:5%;}
184 .cui-roller-btns .cui-btns-sure{background:#ff9913;}
185
186 </style>
187
188 <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
189 </head>
190 <body onselectstart="return false">
191 <div class="cui-pop-box">
192 <div class="cui-hd">
193 <div class="cui-text-center">
194 滚轮滚轮滚轮</div>
195 </div>
196 <div class="cui-bd">
197 <div id="ctripPage">
198 </div>
199 <p class="cui-roller-tips">
200 提示信息</p>
201 <div class="cui-roller-btns">
202 <span class="cui-btns-sure" id="set">设置值</span> <span class="cui-btns-sure" id="get">
203 获取值</span>
204 </div>
205 </div>
206 </div>
207 <script type="text/javascript">
208
209 // var myScroll = new iScroll('wl1');
210
211 (function () {
212 //！！！由于动画原因，获取值可能会出现不准确的情况，比如正在动画却已经取值了
213 //所以设置了一个冷却时间，在冷却时间的情况下设置值等操作不能进行
214 //为了保证唯一性，全部使用index作为索引算了
215 var ScrollRadio = function (opts) {
216 opts = opts || {};
217 //容器元素
218 this.wrapper = opts.wrapper || $(document);
219 this.body = [
220 '<div class="cui-roller">',
221 '<ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2; " >',
222 '</ul>',
223 '<div class="cui-mask"></div>',
224 '<div class="cui-lines"> </div>',
225 '</div>'
226 ].join('');
227 this.body = $(this.body);
228
229 //真正拖动的元素（现在是ul）
230 this.dragEl = this.body.find('.ul-list');
231 //数据源
232 this.data = opts.data || [];
233 this._changed = opts.changed || null;
234 //当前选项索引默认选择2项
235 this.selectedIndex = 1;
236
237 //当前选项值
238 // this.key = '';
239 //当前选项显示的值
240 // this.value = '';
241
242 /*
243 定位实际需要用到的信息
244 暂时不考虑水平移动吧
245 */
246 this.itemHeight = 0; //单个item高度
247 this.dragHeight = 0; //拖动元素高度
248 this.dragTop = 0; //拖动元素top
249 this.animateParam = [10, 6, 2, 1, 0, 0, 0, 0, 0, 0, 0]; //动画参数
250 this.timeGap = 0; //时间间隔
251 this.touchTime = 0; //开始时间
252 this.moveAble = false; //是否正在移动
253 this.moveState = 'up'; //移动状态，up right down left
254 this.oTop = 0; //拖动前的top值
255 this.curTop = 0; //当前容器top
256 this.mouseY = 0; //鼠标第一次点下时相对父容器的位置
257 this.cooling = false; //是否处于冷却时间
258
259 this.init();
260 };
261 ScrollRadio.prototype = {
262 constructor: ScrollRadio,
263 init: function () {
264 this.initItem();
265 this.wrapper.append(this.body);
266 this.initEventParam();
267 this.bindEvent();
268
269 return this;
270 },
271 //增加数据
272 initItem: function () {
273 var _tmp, _data, i, k;
274 for (var i in this.data) {
275 _data = this.data[i]
276 _tmp = $('<li>' + (_data.val == undefined ? i : _data.val) + '</li>');
277 _tmp.attr('data-index', i);
278 for (k in _data) {
279 _tmp.attr('data-' + k, _data[k]);
280 }
281 this.dragEl.append(_tmp);
282 }
283 },
284 //初始化事件需要用到的参数信息
285 initEventParam: function () {
286 var offset = this.dragEl.offset();
287 var itemOffset = this.dragEl.find('li').eq(0).offset();
288 this.itemHeight = itemOffset.height
289 this.dragTop = offset.top;
290 this.dragHeight = this.dragEl[0].scrollHeight;
291 var s = '';
292 },
293 bindEvent: function () {
294 var scope = this;
295 document.addEventListener("touchstart", function (e) {
296 scope.touchStart.call(scope, e);
297 }, false);
298 document.addEventListener("touchend", function (e) {
299 scope.touchEnd.call(scope, e);
300 }, false);
301 document.addEventListener("touchmove", function (e) {
302 scope.touchMove.call(scope, e);
303 }, false);
304 },
305 touchStart: function (e) {
306 if (this.cooling) return false; //冷却时间不能开始
307
308 //需要判断是否是拉取元素，此处需要递归验证，这里暂时不管
309 //！！！！！！！！此处不严谨
310 var el = $(e.srcElement).parent(), pos;
311 if (el.hasClass('ul-list')) {
312 this.moveAble = true;
313
314 this.touchTime = e.timeStamp;
315 //获取鼠标信息
316 pos = this.getMousePos(e.changedTouches[0]);
317 //注意，此处是相对位置，注意该处还与动画有关，所以高度必须动态计算
318 //可以设置一个冷却时间参数，但想想还是算了
319 //最后还是使用了冷却时间
320 // var top = parseFloat(this.dragEl.css('top')) || 0;
321 // this.mouseY = pos.top - top;
322 this.mouseY = pos.top - this.curTop;
323 this.moveAble = true;
324 }
325 },
326 touchMove: function (e) {
327 if (!this.moveAble) return false;
328 var pos = this.getMousePos(e.changedTouches[0]);
329 //先获取相对容器的位置，在将两个鼠标位置相减
330 this.curTop = pos.top - this.mouseY;
331 this.dragEl.css('top', this.curTop + 'px');
332 e.preventDefault();
333 },
334 touchEnd: function (e) {
335 if (!this.moveAble) return false;
336 this.cooling = true; //开启冷却时间
337
338 //时间间隔
339 var scope = this;
340 this.timeGap = e.timeStamp - this.touchTime;
341 var flag = this.oTop <= this.curTop ? 1 : -1; //判断是向上还是向下滚动
342 var flag2 = this.curTop > 0 ? 1 : -1; //这个会影响后面的计算结果
343 this.moveState = flag > 0 ? 'up' : 'down';
344 var ih = parseFloat(this.itemHeight);
345 var ih1 = ih / 2;
346
347 var top = Math.abs(this.curTop);
348 var mod = top % ih;
349 top = (parseInt(top / ih) * ih + (mod > ih1 ? ih : 0)) * flag2;
350
351 var step = parseInt(this.timeGap / 50);
352 step = step > 0 ? step : 0;
353 var speed = this.animateParam[step] || 0;
354 var increment = speed * ih * flag
355 top += increment;
356 //！！！此处动画可能导致数据不同步，后期改造需要加入冷却时间
357 if (this.oTop != this.curTop) {
358 this.dragEl.animate({
359 top: top + 'px'
360 }, 100 + (speed * 20), 'ease-out', function () {
361 var _top = top, t = false; ;
362 if (top > ih) {
363 _top = ih;
364 t = true;
365 }
366 if (top < 0 && (top + scope.dragHeight < ih * 2)) {
367 t = true;
368 _top = (scope.dragHeight - ih * 2) * (-1);
369 }
370 if (t) {
371 scope.dragEl.animate({
372 top: _top + 'px'
373 }, 10, 'ease-in-out', function () {
374 scope.oTop = _top;
375 scope.curTop = _top;
376 scope.cooling = false; //关闭冷却时间
377 scope.onTouchEnd();
378 });
379 } else {
380 scope.cooling = false; //关闭冷却时间
381 scope.oTop = top;
382 scope.curTop = top;
383 scope.onTouchEnd();
384 }
385 });
386 } else {
387 this.cooling = false; //关闭冷却时间
388 this.onTouchEnd();
389 }
390 this.moveAble = false;
391 },
392 onTouchEnd: function () {
393 var i = parseInt((this.curTop - this.itemHeight) / parseFloat(this.itemHeight));
394 this.selectedIndex = Math.abs(i);
395 var secItem = this.data[this.selectedIndex];
396 //触发变化事件
397 var changed = this._changed;
398 if (changed && typeof changed == 'function') {
399 changed.call(this, secItem);
400 }
401 console.log(this.selectedIndex, secItem);
402 },
403 setKey: function (k) { },
404 setVal: function (v) { },
405 setIndex: function (i) {
406 var i = parseInt(i);
407 if (i >= this.data.length || i < 0) return false;
408
409 this.selectedIndex = i;
410 this.curTop = (i * this.itemHeight * (-1) + this.itemHeight);
411 this.dragEl.css('top', this.curTop + 'px');
412 },
413 getSelected: function () {
414 return this.data[this.selectedIndex];
415 },
416 getByKey: function (k) { },
417 getByVal: function (v) { },
418 getByIndex: function (i) { },
419 //获取鼠标信息
420 getMousePos: function (event) {
421 var top, left;
422 top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
423 left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
424 return {
425 top: top + event.clientY,
426 left: left + event.clientX
427 };
428 }
429 };
430 window.ScrollRadio = ScrollRadio;
431
432 })();
433
434 var data = [];
435 for (var i = 0; i < 20; i++) {
436 var temp = { val: '选项-' + i };
437 data.push(temp);
438 }
439
440
441
442 var myScroll = new ScrollRadio({
443 wrapper: $('#ctripPage'),
444 data: data
445 });
446
447 $('#set').click(function () {
448 var i = prompt("请输入索引值")
449 if (i != null && i != "") {
450 myScroll.setIndex(i);
451 }
452 });
453
454 $('#get').click(function () {
455 var d = myScroll.getSelected();
456 var str = '';
457 for (var k in d) {
458 str += k + ': ' + d[k] + ',';
459 }
460 alert(str);
461 });
462
463 var s = '';
464
465 </script>
466 </body>
467 </html>
我们这里简单看看代码：
1 (function () {
2 //！！！由于动画原因，获取值可能会出现不准确的情况，比如正在动画却已经取值了
3 //所以设置了一个冷却时间，在冷却时间的情况下设置值等操作不能进行
4 //为了保证唯一性，全部使用index作为索引算了
5 var ScrollRadio = function (opts) {
6 opts = opts || {};
7 //容器元素
8 this.wrapper = opts.wrapper || $(document);
9 this.body = [
10 '<div class="cui-roller">',
11 '<ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2; " >',
12 '</ul>',
13 '<div class="cui-mask"></div>',
14 '<div class="cui-lines"> </div>',
15 '</div>'
16 ].join('');
17 this.body = $(this.body);
18
19 //真正拖动的元素（现在是ul）
20 this.dragEl = this.body.find('.ul-list');
21 //数据源
22 this.data = opts.data || [];
23 this._changed = opts.changed || null;
24 //当前选项索引默认选择2项
25 this.selectedIndex = 1;
26
27 //当前选项值
28 // this.key = '';
29 //当前选项显示的值
30 // this.value = '';
31
32 /*
33 定位实际需要用到的信息
34 暂时不考虑水平移动吧
35 */
36 this.itemHeight = 0; //单个item高度
37 this.dragHeight = 0; //拖动元素高度
38 this.dragTop = 0; //拖动元素top
39 this.animateParam = [10, 6, 2, 1, 0, 0, 0, 0, 0, 0, 0]; //动画参数
40 this.timeGap = 0; //时间间隔
41 this.touchTime = 0; //开始时间
42 this.moveAble = false; //是否正在移动
43 this.moveState = 'up'; //移动状态，up right down left
44 this.oTop = 0; //拖动前的top值
45 this.curTop = 0; //当前容器top
46 this.mouseY = 0; //鼠标第一次点下时相对父容器的位置
47 this.cooling = false; //是否处于冷却时间
48
49 this.init();
50 };
51 ScrollRadio.prototype = {
52 constructor: ScrollRadio,
53 init: function () {
54 this.initItem();
55 this.wrapper.append(this.body);
56 this.initEventParam();
57 this.bindEvent();
58
59 return this;
60 },
61 //增加数据
62 initItem: function () {
63 var _tmp, _data, i, k;
64 for (var i in this.data) {
65 _data = this.data[i]
66 _tmp = $('<li>' + (_data.val == undefined ? i : _data.val) + '</li>');
67 _tmp.attr('data-index', i);
68 for (k in _data) {
69 _tmp.attr('data-' + k, _data[k]);
70 }
71 this.dragEl.append(_tmp);
72 }
73 },
74 //初始化事件需要用到的参数信息
75 initEventParam: function () {
76 var offset = this.dragEl.offset();
77 var itemOffset = this.dragEl.find('li').eq(0).offset();
78 this.itemHeight = itemOffset.height
79 this.dragTop = offset.top;
80 this.dragHeight = this.dragEl[0].scrollHeight;
81 var s = '';
82 },
83 bindEvent: function () {
84 var scope = this;
85 document.addEventListener("touchstart", function (e) {
86 scope.touchStart.call(scope, e);
87 }, false);
88 document.addEventListener("touchend", function (e) {
89 scope.touchEnd.call(scope, e);
90 }, false);
91 document.addEventListener("touchmove", function (e) {
92 scope.touchMove.call(scope, e);
93 }, false);
94 },
95 touchStart: function (e) {
96 if (this.cooling) return false; //冷却时间不能开始
97
98 //需要判断是否是拉取元素，此处需要递归验证，这里暂时不管
99 //！！！！！！！！此处不严谨
100 var el = $(e.srcElement).parent(), pos;
101 if (el.hasClass('ul-list')) {
102 this.moveAble = true;
103
104 this.touchTime = e.timeStamp;
105 //获取鼠标信息
106 pos = this.getMousePos(e.changedTouches[0]);
107 //注意，此处是相对位置，注意该处还与动画有关，所以高度必须动态计算
108 //可以设置一个冷却时间参数，但想想还是算了
109 //最后还是使用了冷却时间
110 // var top = parseFloat(this.dragEl.css('top')) || 0;
111 // this.mouseY = pos.top - top;
112 this.mouseY = pos.top - this.curTop;
113 this.moveAble = true;
114 }
115 },
116 touchMove: function (e) {
117 if (!this.moveAble) return false;
118 var pos = this.getMousePos(e.changedTouches[0]);
119 //先获取相对容器的位置，在将两个鼠标位置相减
120 this.curTop = pos.top - this.mouseY;
121 this.dragEl.css('top', this.curTop + 'px');
122 e.preventDefault();
123 },
124 touchEnd: function (e) {
125 if (!this.moveAble) return false;
126 this.cooling = true; //开启冷却时间
127
128 //时间间隔
129 var scope = this;
130 this.timeGap = e.timeStamp - this.touchTime;
131 var flag = this.oTop <= this.curTop ? 1 : -1; //判断是向上还是向下滚动
132 var flag2 = this.curTop > 0 ? 1 : -1; //这个会影响后面的计算结果
133 this.moveState = flag > 0 ? 'up' : 'down';
134 var ih = parseFloat(this.itemHeight);
135 var ih1 = ih / 2;
136
137 var top = Math.abs(this.curTop);
138 var mod = top % ih;
139 top = (parseInt(top / ih) * ih + (mod > ih1 ? ih : 0)) * flag2;
140
141 var step = parseInt(this.timeGap / 50);
142 step = step > 0 ? step : 0;
143 var speed = this.animateParam[step] || 0;
144 var increment = speed * ih * flag
145 top += increment;
146 //！！！此处动画可能导致数据不同步，后期改造需要加入冷却时间
147 if (this.oTop != this.curTop) {
148 this.dragEl.animate({
149 top: top + 'px'
150 }, 100 + (speed * 20), 'ease-out', function () {
151 var _top = top, t = false; ;
152 if (top > ih) {
153 _top = ih;
154 t = true;
155 }
156 if (top < 0 && (top + scope.dragHeight < ih * 2)) {
157 t = true;
158 _top = (scope.dragHeight - ih * 2) * (-1);
159 }
160 if (t) {
161 scope.dragEl.animate({
162 top: _top + 'px'
163 }, 10, 'ease-in-out', function () {
164 scope.oTop = _top;
165 scope.curTop = _top;
166 scope.cooling = false; //关闭冷却时间
167 scope.onTouchEnd();
168 });
169 } else {
170 scope.cooling = false; //关闭冷却时间
171 scope.oTop = top;
172 scope.curTop = top;
173 scope.onTouchEnd();
174 }
175 });
176 } else {
177 this.cooling = false; //关闭冷却时间
178 this.onTouchEnd();
179 }
180 this.moveAble = false;
181 },
182 onTouchEnd: function () {
183 var i = parseInt((this.curTop - this.itemHeight) / parseFloat(this.itemHeight));
184 this.selectedIndex = Math.abs(i);
185 var secItem = this.data[this.selectedIndex];
186 //触发变化事件
187 var changed = this._changed;
188 if (changed && typeof changed == 'function') {
189 changed.call(this, secItem);
190 }
191 console.log(this.selectedIndex, secItem);
192 },
193 setKey: function (k) { },
194 setVal: function (v) { },
195 setIndex: function (i) {
196 var i = parseInt(i);
197 if (i >= this.data.length || i < 0) return false;
198
199 this.selectedIndex = i;
200 this.curTop = (i * this.itemHeight * (-1) + this.itemHeight);
201 this.dragEl.css('top', this.curTop + 'px');
202 },
203 getSelected: function () {
204 return this.data[this.selectedIndex];
205 },
206 getByKey: function (k) { },
207 getByVal: function (v) { },
208 getByIndex: function (i) { },
209 //获取鼠标信息
210 getMousePos: function (event) {
211 var top, left;
212 top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
213 left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
214 return {
215 top: top + event.clientY,
216 left: left + event.clientX
217 };
218 }
219 };
220 window.ScrollRadio = ScrollRadio;
221
222 })();
以上代码基本框架都出来了，也有注释，有兴趣的朋友自己看看，我们现在进行最后一步了，将日历搞上去，老夫来不起了。。。
日历插件:)
http://sandbox.runjs.cn/show/prii13pm
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6
7 /*reset*/
8 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
9 body,button,input,select,textarea{font:normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft YaHei",hei;}
10 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,iframe{display:block;}
11 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}
12 address,cite,dfn,em,var,i{font-style:normal;font-weight:normal;font-family:arial;}
13 ul,ol{list-style:none}
14 a{color:#000;text-decoration:none}
15 a:hover{text-decoration:underline;-webkit-transition:color .2s linear;-moz-transition:color .2s linear;-ms-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear;}
16 fieldset,img,button,input{border:0}
17 button,input,select,textarea{font-size:100%}
18 table{border-collapse:collapse;border-spacing:0}
19 input[type="button"],input[type="submit"]{-webkit-appearance:none;}
20 body{min-width:320px; background:#f5f5f5;overflow-x:hidden;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:subpixel-antialiased;-moz-user-select:none;color:#000;}:focus{outline:none;}.clearfix:after{clear:both;content:'.';display:block;height:0;visibility:hidden;line-height:0;}.clearfix{*zoom:1;}.fl{float:left;}.fr{float:right;}.clear{clear:both;}.overflow{overflow:hidden;}.ellips{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.ellips_line2,.ellips_line3{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;}.ellips_line2{-webkit-line-clamp:2;}.ellips_line3{-webkit-line-clamp:3;}.pos_rel{position:relative;}
21 html,body,.h100{ height:100%; }
22 dfn{color:#ff9913; font-size:12px; font-weight:normal;}
23 /*-----------------------------------------common--------------------*/
24 .i,.i_bef:before,.i_aft:after,.carlist li:before,.ok_crt:after{background:url(../img/style1/v2_bgs.png) no-repeat; background-size:175px 125px;}
25 .i_bef:before,.i_aft:after,.carlist li:before{position: absolute;content: "";}
26 .abs_size{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
27 .opacity{opacity:0.7; filter:alpha(opacity=70);}
28
29 /*active*/
30 .list_st_border li:active,.p_hinttxt:active,.search_cancel:active,.citylist dd:active{ background:#f8f8f8;}
31 .btn_yellow:active{background:#eb840f;}
32
33 /*layout*/
34 .wrap{margin-top:48px;}
35 .wrap_pb{margin-top:48px; padding-bottom:45px;}
36 .p10{padding:10px;}
37 .hm{text-align:center;}
38 .break_all{word-break:break-all;}
39 .fix_b{position:fixed; bottom:0; left:0;z-index:9999;}
40
41 /*font bg color size*/
42 h1{font:normal 1.286em/1.5 "";}/*18px*/
43 h2{font:normal 1.143em/1.5 "";}/*16px*/
44 h3{font:600 1em/1.5 "";}/*14px*/
45 .price{margin-left:5px;}
46 .price i{margin-left:2px; font-size:1.286em;}
47 .greyfont{color:#686868;}
48 .greyfont1{color:#909090;}
49 .bggrey{height:100%; background:#f5f5f5;}
50
51 /*header*/
52 header{position:fixed; top:0; left:0; z-index:9999; width:100%; height:48px;background-color:#1491c5;}
53 .returnico{position:absolute; left:0; top:0; width:68px; height:48px; background-color:#15a4d5;}
54 .returnico:before{left:25px;top:16px;width:12px;height:20px; background-position:0 0;}
55 .icon_phone,.icon_home{width:42px;height:100%;top:0;position:relative;float:right;}
56 .icon_phone:before{width:11px;height:20px;top:16px;right:12px;background-position:-115px -65px;}
57 .icon_home:before{width:20px;height:19px;top:16px;right:10px;background-position:-83px -66px;}
58 header i:active{opacity:0.7; filter:alpha(opacity=70);}
59 header h1{position:absolute; width:100%;line-height:48px; text-align:center; letter-spacing:2px; color: #fff;}
60 .header_r,.header_rs{position:absolute;z-index:9; top:0; right:0; line-height:48px; padding:0 15px; font-size:18px; background:#15a4d5; color:#fff;}
61 .header_rs{padding:0 5px; font-size:12px; }
62
63 /*background-position*/
64 .select_n:before{width:20px;height:20px;background-position:-18px 0;}
65 .select_n.current:before{background-position:-44px 0;}
66
67 /*searchbox*/
68 .search_wrap{overflow:hidden; padding:10px; background:#dfeaf1;}
69 .search_box{position:relative; float:left; width:100%;}
70 .search_input{width:100%; padding:0 10px 0 28px; line-height:30px; background-color:#fff; border-radius:4px; color:#ccc;}
71 .fdj:before,.fdj:after,.search_box:before,.search_box:after{position:absolute; content:""; z-index:9;}
72 .fdj:before,.search_box:before{left:5px; top:7px; width:12px; height:12px; border:1px solid #bcbcbc; border-radius:12px;}
73 .fdj:after,.search_box:after{left:19px; top:17px; width:1px; height:8px; background:#bcbcbc;}
74 .search_cancel{ display:none;float:left; width:20%; line-height:30px; text-align:center; font-size:16px;color:#1491c5; background:none; border:none;}
75 .close_icon{display:none; position:absolute; z-index:10; top:8px; right:4px; width:16px; height:16px; border-radius:30px; background:#b1b1b1;}
76 .close_icon:before,.close_icon:after{position:absolute; content:""; top:4px; left:7px; width:2px; height:8px; background:#fff; }
77 .close_icon:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
78 .fdj:after,.search_box:after,.close_icon:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
79 .search_focus .search_box{width:80%;}
80 .search_focus .close_icon, .search_focus .search_cancel{display:block;}
81 .search_input:focus{color:#000;}
82
83 /*tab*/
84 .tab{ background-color:#f8f8f8; border-bottom:1px solid #dfdfdf;}
85 .tab li{float:left; width:50%; height:39px; line-height:39px; text-align:center; border-right:1px solid #dfdfdf;}
86 .tab li:last-child{border-right:none;}
87 .tab li.tabcrt{ background-color:#dfdfdf;}
88
89 .tab_b{ background-color:#f5f5f5; border-bottom:1px solid #c1c1c1;}
90 .tab_b li{float:left; width:50%; height:39px; line-height:39px; text-align:center;}
91 .tab_b li:last-child{border-right:none;}
92 .tab_b li.tabcrt{color:#1491c5; border-bottom:4px solid #1491c5;}
93
94 /*list*/
95 .list_st_border{ background:#fff; border-bottom:none; border:1px solid #cfcfcf; }
96 .list_st_border li{position:relative;padding:0 10px; line-height:42px; border-bottom:1px solid #cfcfcf;}
97 .list_st_border li:last-child{border-bottom:none;}
98
99 .list_sli{padding:10px; overflow:hidden; border-bottom:1px solid #cfcfcf; background:#fff;}
100 .list_sli .list_sunit{float:left;}
101
102 .citylist{color:#000;}
103 .citylist dt,.citylist dd{padding-left:10px;border-bottom:1px solid #e2e2e2;}
104 .citylist dt{line-height:25px; background-color:#eaeaea;}
105 .citylist dd{position:relative; font-size:16px; line-height:43px; background-color:#fff;}
106 .citylist .ok_crt{color:#1491c5;}
107 .citylist .ok_crt:after{position:absolute;content:""; right:10px; top:50%; margin-top:-6px; width:12px; height:13px; background-position:-110px 0;}
108
109
110 /*arr*/
111 .li_arr_r{position:relative;}
112 .arr_r{position:absolute;right:0px; top:50%; width:30px; height:30px; margin-top:-15px; }
113 .arr_r:before,.arr_r:after,.li_arr_r:before,.li_arr_r:after{position: absolute; left:15px; content: "";width:2px; height:7px; background-color:#909090;}
114 .arr_r:before,.li_arr_r:before{top:10px;-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
115 .arr_r:after,.li_arr_r:after{top:15px;-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
116 .li_arr_r:before,.li_arr_r:after{left:auto; right:10px; top:50%; margin-top:-5px;}
117 .li_arr_r:after{margin-top:0;}
118
119 /*p*/
120 .p_grey{margin:10px 5px; font-size:13px; color:#989898;}
121 .p_grey_center{ text-align:center; margin:20px 5px; font-size:13px; color:#989898;}
122 .p_hinttxt{padding:20px 10px; text-align:center; font-size:16px; color:#1491c5;}
123
124
125 /*btn*/
126 .btn_yellow,.btn_del{width:100%; height:44px; line-height:42px; padding:0 10px; color:#fff;}
127 .btn_yellow{background:#ff9913;}
128 .btn_del{background:#ca4345;text-align:center;font-size:1.2em;}
129
130 .btn_pay{padding:0 20px;height:44px;float:right;background:#ff7d13;color:#fff;}
131 .btn_pay:active{background:#ff7300;}
132 .room_num {position:absolute; right:10px; width:100px; height:30px; line-height:30px;color:#000;background-color: #fff; text-align:center;border:#bfbfbf 1px solid;}
133 .room_num i{position:absolute; width:30px; height:30px; text-align:center; font:normal 2em/28px "Arial";}
134 .room_num i:first-child{left:0;background:#f4f4f4;color:#d9d9d9;font:normal 2.8em/25px "Arial";}
135 .room_num i:last-child{right:0;background:#06a2d0;color:#fff;}
136
137
138 /*日历*/
139 .cui_cldwrap{color:#000;}
140 .cui_cldweek{height:25px; overflow:hidden;font:normal 12px/24px "verdana";border-bottom:1px solid #c8c8c8;}
141 .cui_cldweek li{float:left; width:14%; text-align:center; }
142 .cui_cldweek li:first-child,.cui_cldweek li:last-child{width:15%; color:#acacac;}
143 .cui_cldmonth{height:35px;text-align:center;font:normal 16px/35px "verdana"; background:#fff;}
144 .cui_cldunit{margin-bottom:20px;}
145 .cui_cld_daybox{overflow:hidden; background:#fff;}
146 .cui_cld_daybox li{float:left; width:14%; height:45px; padding:4px 0; font:normal 12px/45px "verdana"; overflow:hidden; text-align:center;}
147 .cui_cld_daybox li:nth-child(7n),.cui_cld_daybox li:nth-child(7n+1){width:15%;}
148 .cui_cld_daypass{ background:#f7f7f7;}
149 .cui_cld_daycrt{background:#06a2d0; color:#fff;}
150 .cui_cld_dayfuture{background:#fff;}
151 .cui_cld_day_nocrtmonth{ visibility:hidden;}
152 .cui_cld_day_havetxt em{display:block; line-height:25px;}
153 .cui_cld_day_havetxt i{display:block;line-height:15px;}
154 .cui_cld_day_hint{color:#06a2d0;}
155 /*全局XXXX*/
156
157 /*弹出蓝色框*/
158 .cui-pop-box{background:#fff;}
159 .cui-text-center{text-align:center;}
160 .cui-pop-box .cui-hd{height:40px;line-height:40px;font-size:1.2em;color:#fff;background:#1491c5;padding:0 10px;position:relative;}
161 .cui-pop-box .cui-hd .cui-close{position:absolute;top:10px; right:10px; width:18px; height:18px;line-height:18px;border-radius:50%; background:#fff;color:#1491c5;text-align:center;font-weight:bold;}
162 .cui-error{width:150px;margin:auto;border-radius:5px;background:rgba(73,73,73,1);padding:10px;color:#fff;font-weight:700;text-align:center;word-break:break-all;}
163 .cui-select-view li{border-bottom:#dfdfdf 1px solid;padding:.8em 2em .8em .8em;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;position:relative;}
164 .cui-select-view li.current{color:#1084bc;}
165 .cui-select-view li:active{background:rgba(0,0,0,.05);}
166 .cui-select-view li.current:before,.cui-select-view li.current:after{position:absolute;content:"";background:#1084bc;height:3px;top:50%;border-radius:3px;}
167 .cui-select-view li.current:before{width:18px;right:10px;margin-top:-2px;-webkit-transform:rotate(-50deg);-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg);}
168 .cui-select-view li.current:after{width:9px;right:22px;margin-top:2px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
169
170 .cui-roller{width:100%;height:90px;overflow:hidden;position:relative;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
171 .cui-roller .ul-list{height:100%;text-align:center;font-size:1.1em;line-height:30px;-webkit-box-flex: 1;-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
172 .cui-mask{position:absolute;z-index:3;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
173 background: linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
174 background: -webkit-gradient(linear,left bottom,left top,from(#fff),color-stop(0.52,rgba(245,245,245,0)),color-stop(0.48,rgba(245,245,245,0)),to(#fff));
175 background: -webkit-linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
176 background: -moz-linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
177 }
178 .cui-lines{width:100%;height:34px;position:absolute;top:50%;margin-top:-17px;border-top:#dfdfdf 1px solid;border-bottom:#dfdfdf 1px solid;}
179 .cui-roller-tips{color:#8d8d8d;padding:5px;text-align:center;}
180 .cui-roller-btns{background:#f6f5f5;padding:10px;text-align:center;}
181 .cui-roller-btns span{width:45%;display:inline-block;padding:10px 0;color:#fff;}
182 .cui-roller-btns span:active{opacity:.75;}
183 .cui-roller-btns .cui-btns-cancel{background:#a9a9a9;margin-right:5%;}
184 .cui-roller-btns .cui-btns-sure{background:#ff9913;}
185
186 </style>
187 <style type="text/css">
188 .c { position: absolute; top: 0; }
189 #y { left: 0; width: 30%; }
190 #m { left: 30%; right: 40%; }
191 #d { right: 0; width: 40%; }
192 </style>
193 <script src="../zepto.js" type="text/javascript"></script>
194 </head>
195 <body onselectstart="return false">
196 <div class="cui-pop-box">
197 <div class="cui-hd">
198 <div class="cui-text-center">
199 我是日历控件</div>
200 </div>
201 <div class="cui-bd">
202 <div style="height: 90px; position: relative;">
203 <div id="y" class="c">
204 </div>
205 <div id="m" class="c">
206 </div>
207 <div id="d" class="c">
208 </div>
209 </div>
210 <p class="cui-roller-tips">
211 点击获取日期吧！</p>
212 <div class="cui-roller-btns">
213 <span class="cui-btns-cancel" id="set">取消</span> <span class="cui-btns-sure" id="get">
214 获取日期</span>
215 </div>
216 </div>
217 </div>
218
219 <script type="text/javascript">
220
221 // var myScroll = new iScroll('wl1');
222
223 (function () {
224 //！！！由于动画原因，获取值可能会出现不准确的情况，比如正在动画却已经取值了
225 //所以设置了一个冷却时间，在冷却时间的情况下设置值等操作不能进行
226 //为了保证唯一性，全部使用index作为索引算了
227 var ScrollRadio = function (opts) {
228 opts = opts || {};
229 //容器元素
230 this.wrapper = opts.wrapper || $(document);
231 var id = new Date().getTime() + Math.random() + 'id';
232 this.body = [
233 '<div class="cui-roller">',
234 '<ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2; " id="' + id + '" >',
235 '</ul>',
236 '<div class="cui-mask"></div>',
237 '<div class="cui-lines"> </div>',
238 '</div>'
239 ].join('');
240 this.body = $(this.body);
241
242 //真正拖动的元素（现在是ul）
243 this.dragEl = this.body.find('.ul-list');
244 //数据源
245 this.data = opts.data || [];
246 this._changed = opts.changed || null;
247 //当前选项索引默认选择2项
248 this.selectedIndex = 1;
249
250 //当前选项值
251 // this.key = '';
252 //当前选项显示的值
253 // this.value = '';
254
255 /*
256 定位实际需要用到的信息
257 暂时不考虑水平移动吧
258 */
259 this.itemHeight = 0; //单个item高度
260 this.dragHeight = 0; //拖动元素高度
261 this.dragTop = 0; //拖动元素top
262 this.animateParam = [10, 6, 2, 1, 0, 0, 0, 0, 0, 0, 0]; //动画参数
263 this.timeGap = 0; //时间间隔
264 this.touchTime = 0; //开始时间
265 this.moveAble = false; //是否正在移动
266 this.moveState = 'up'; //移动状态，up right down left
267 this.oTop = 0; //拖动前的top值
268 this.curTop = 0; //当前容器top
269 this.mouseY = 0; //鼠标第一次点下时相对父容器的位置
270 this.cooling = false; //是否处于冷却时间
271
272 this.init();
273 };
274 ScrollRadio.prototype = {
275 constructor: ScrollRadio,
276 init: function () {
277 this.initItem();
278 this.wrapper.append(this.body);
279 this.initEventParam();
280 this.bindEvent();
281 },
282 //增加数据
283 initItem: function () {
284 var _tmp, _data, i, k;
285 for (var i in this.data) {
286 _data = this.data[i]
287 _tmp = $('<li>' + (_data.val == undefined ? i : _data.val) + '</li>');
288 _tmp.attr('data-index', i);
289 for (k in _data) {
290 _tmp.attr('data-' + k, _data[k]);
291 }
292 this.dragEl.append(_tmp);
293 }
294 },
295 //初始化事件需要用到的参数信息
296 initEventParam: function () {
297 var offset = this.dragEl.offset();
298 var itemOffset = this.dragEl.find('li').eq(0).offset();
299 this.itemHeight = itemOffset.height
300 this.dragTop = offset.top;
301 this.dragHeight = this.dragEl[0].scrollHeight;
302 var s = '';
303 },
304 bindEvent: function () {
305 var scope = this;
306 this.dragEl[0].addEventListener("touchstart", function (e) {
307 scope.touchStart.call(scope, e);
308 }, false);
309 this.dragEl[0].addEventListener("touchend", function (e) {
310 scope.touchEnd.call(scope, e);
311 }, false);
312 this.dragEl[0].addEventListener("touchmove", function (e) {
313 scope.touchMove.call(scope, e);
314 }, false);
315 },
316 touchStart: function (e) {
317 if (this.cooling) return false; //冷却时间不能开始
318
319 //需要判断是否是拉取元素，此处需要递归验证，这里暂时不管
320 //！！！！！！！！此处不严谨
321 var el = $(e.srcElement).parent(), pos;
322 if (el.hasClass('ul-list')) {
323 this.moveAble = true;
324
325 this.touchTime = e.timeStamp;
326 //获取鼠标信息
327 pos = this.getMousePos(e.changedTouches[0]);
328 //注意，此处是相对位置，注意该处还与动画有关，所以高度必须动态计算
329 //可以设置一个冷却时间参数，但想想还是算了
330 //最后还是使用了冷却时间
331 // var top = parseFloat(this.dragEl.css('top')) || 0;
332 // this.mouseY = pos.top - top;
333 this.mouseY = pos.top - this.curTop;
334 this.moveAble = true;
335 }
336 },
337 touchMove: function (e) {
338 if (!this.moveAble) return false;
339 var pos = this.getMousePos(e.changedTouches[0]);
340 //先获取相对容器的位置，在将两个鼠标位置相减
341 this.curTop = pos.top - this.mouseY;
342 this.dragEl.css('top', this.curTop + 'px');
343 e.preventDefault();
344 },
345 touchEnd: function (e) {
346 if (!this.moveAble) return false;
347 this.cooling = true; //开启冷却时间
348
349 //时间间隔
350 var scope = this;
351 this.timeGap = e.timeStamp - this.touchTime;
352 var flag = this.oTop <= this.curTop ? 1 : -1; //判断是向上还是向下滚动
353 var flag2 = this.curTop > 0 ? 1 : -1; //这个会影响后面的计算结果
354 this.moveState = flag > 0 ? 'up' : 'down';
355 var ih = parseFloat(this.itemHeight);
356 var ih1 = ih / 2;
357
358 var top = Math.abs(this.curTop);
359 var mod = top % ih;
360 top = (parseInt(top / ih) * ih + (mod > ih1 ? ih : 0)) * flag2;
361
362 var step = parseInt(this.timeGap / 50);
363 step = step > 0 ? step : 0;
364 var speed = this.animateParam[step] || 0;
365 var increment = speed * ih * flag
366 top += increment;
367 //！！！此处动画可能导致数据不同步，后期改造需要加入冷却时间
368 if (this.oTop != this.curTop) {
369 this.dragEl.animate({
370 top: top + 'px'
371 }, 100 + (speed * 20), 'ease-out', function () {
372 var _top = top, t = false; ;
373 if (top > ih) {
374 _top = ih;
375 t = true;
376 }
377 if (top < 0 && (top + scope.dragHeight < ih * 2)) {
378 t = true;
379 _top = (scope.dragHeight - ih * 2) * (-1);
380 }
381 if (t) {
382 scope.dragEl.animate({
383 top: _top + 'px'
384 }, 10, 'ease-in-out', function () {
385 scope.oTop = _top;
386 scope.curTop = _top;
387 scope.cooling = false; //关闭冷却时间
388 scope.onTouchEnd();
389 });
390 } else {
391 scope.cooling = false; //关闭冷却时间
392 scope.oTop = top;
393 scope.curTop = top;
394 scope.onTouchEnd();
395 }
396 });
397 } else {
398 this.cooling = false; //关闭冷却时间
399 this.onTouchEnd();
400 }
401 this.moveAble = false;
402 },
403 onTouchEnd: function () {
404 var i = parseInt((this.curTop - this.itemHeight) / parseFloat(this.itemHeight));
405 this.selectedIndex = Math.abs(i);
406 var secItem = this.data[this.selectedIndex];
407 //触发变化事件
408 var changed = this._changed;
409 if (changed && typeof changed == 'function') {
410 changed.call(this, secItem);
411 }
412 console.log(this.selectedIndex, secItem);
413 },
414 setKey: function (k) { },
415 setVal: function (v) { },
416 setIndex: function (i) {
417 var i = parseInt(i);
418 if (i >= this.data.length || i < 0) return false;
419
420 this.selectedIndex = i;
421 this.curTop = (i * this.itemHeight * (-1) + this.itemHeight);
422 this.dragEl.css('top', this.curTop + 'px');
423 },
424 getSelected: function () {
425 return this.data[this.selectedIndex];
426 },
427 getByKey: function (k) { },
428 getByVal: function (v) { },
429 getByIndex: function (i) { },
430 //获取鼠标信息
431 getMousePos: function (event) {
432 var top, left;
433 top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
434 left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
435 return {
436 top: top + event.clientY,
437 left: left + event.clientX
438 };
439 }
440 };
441 window.ScrollRadio = ScrollRadio;
442
443 })();
444
445 var yy = [];
446 for (var i = 0; i < 150; i++) {
447 var temp = { val: 1900 + i };
448 yy.push(temp);
449 }
450
451 var mm = [];
452 for (var i = 0; i < 12; i++) {
453 var temp = { val: i > 10 ? i : (0 + '' + i) };
454 mm.push(temp);
455 }
456
457 var dd = [];
458 for (var i = 0; i < 31; i++) {
459 var temp = { val: i > 10 ? i : (0 + '' + i) };
460 dd.push(temp);
461 }
462
463 var y = new ScrollRadio({
464 wrapper: $('#y'),
465 data: yy
466 });
467 var m = new ScrollRadio({
468 wrapper: $('#m'),
469 data: mm
470 });
471 var d = new ScrollRadio({
472 wrapper: $('#d'),
473 data: dd
474 });
475
476 $('#get').click(function () {
477 alert(y.getSelected().val + '-' + m.getSelected().val + '-' + d.getSelected().val);
478 });
479
480 var s = '';
481
482 </script>
483 </body>
484 </html>
今天时间用多了，老夫有点来不起了，我们下次再完善吧。。。。。。
结语
若是各位觉得有用的话不妨用一用，发现什么BUG请留言，我下次一并更新，BUG应该很多的。
来源：https://www.cnblogs.com/yexiaochai/p/3322477.html