首页 > 代码库 > iPhone日历选择器效果
iPhone日历选择器效果
最近有个想法，要做一个仿iPhone日历的选择器插件，最终效果要如下图：
开始
首先注意到这些数字是按照滚轮的方式排列的，就先实现这个效果吧。
3D的世界中有个重要属性，transform rotate，其中rotateX效果如下
<img src="favicon.ico" style="transform:rotateX(0deg);"> <img src="favicon.ico" style="transform:rotateX(10deg);"> <img src="favicon.ico" style="transform:rotateX(20deg);"> <img src="favicon.ico" style="transform:rotateX(30deg);"> <img src="favicon.ico" style="transform:rotateX(40deg);"> <img src="favicon.ico" style="transform:rotateX(50deg);"> <img src="favicon.ico" style="transform:rotateX(60deg);"> <img src="favicon.ico" style="transform:rotateX(70deg);"> <img src="favicon.ico" style="transform:rotateX(80deg);"> <img src="favicon.ico" style="transform:rotateX(90deg);">
这个太阳看着一个比一个扁，其实他们再沿着X轴做旋转呢。旋转都有一个旋转中心，默认就是自己的中心点，但我们可以通过translateZ来修改这个中心点，如果让一组图片绕着同一个中心点旋转，不就能组成上文的滚轮了吗
<ul class="picker_ul"> <img src="favicon.ico" style="transform:rotateX(0deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(10deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(20deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(30deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(40deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(50deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(60deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(70deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(80deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(90deg) translateZ(50px);"> </ul>
效果如下：
这里旋转的角度，translate的具体还是需要经过计算的。我们计划用十张图片围成一个圆，那步长应该是36deg，图片是48*48，所以半径应该是480/2/3.1415926=77px，再改：
终于有点样子了
第二步 非当前值置灰
观察iPhone日历选择器，除了滚轮效果，还有逐渐置灰效果，越近越清晰，越远越模糊。
可以用一个透明的遮罩遮在上面，越靠近中间不透明度越低，越靠近两边不透明度越高。这里使用-webkit-linear-gradient来实现再合适不过了
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-webkit-linear-gradient就是一个颜色透明度的线性渐变，我们可以控制几个渐变点
如：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="format-detection" content="telephone=no"> 6 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <title>时间日期选择器</title> 8 <style> 9 body{margin:0;} 10 ul{margin:0;padding:0;list-style:none; 11 -webkit-transition:transform 1s; 12 } 13 img{text-align:center;line-height:30px;font-size:1.1em; 14 -webkit-transition:opacity 1s, transform 1s;position:absolute;right:50%;top:60px; 15 } 16 .picker{position:relative;height:180px;} 17 .picker_ul{position: absolute;z-index:1;width:100%;overflow:hidden;height:100%;} 18 .picker_panel{position:absolute;z-index:2;width:100%;height:100%;top:0; 19 background:-webkit-linear-gradient(top, rgb(255, 255, 255) 0, rgba(220, 220, 220, 0) 48%, rgba(220, 220, 220, 0) 52%, rgb(255, 255, 255) 100%);} 20 </style> 21 </head> 22 <body> 23 <div id="demo2"> 24 <div class="picker"> 25 <ul class="picker_ul"> 26 <img src="favicon.ico" style="transform:rotateX(-72deg) translateZ(77px);"> 27 <img src="favicon.ico" style="transform:rotateX(-36deg) translateZ(77px);"> 28 <img src="favicon.ico" style="transform:rotateX(0deg) translateZ(77px);"> 29 <img src="favicon.ico" style="transform:rotateX(36deg) translateZ(77px);"> 30 <img src="favicon.ico" style="transform:rotateX(72deg) translateZ(77px);"> 31 <img src="favicon.ico" style="transform:rotateX(108deg) translateZ(77px);"> 32 <img src="favicon.ico" style="transform:rotateX(144deg) translateZ(77px);"> 33 <img src="favicon.ico" style="transform:rotateX(180deg) translateZ(77px);"> 34 <img src="favicon.ico" style="transform:rotateX(216deg) translateZ(77px);"> 35 <img src="favicon.ico" style="transform:rotateX(252deg) translateZ(77px);"> 36 </ul> 37 <div class="picker_panel"></div> 38 </div> 39 </div> 40 <script src="lib/zepto.js"></script> 41 </body> 42 </html>
有点样子了，但跟日历选择器效果还有点差距，主要是因为我们是从中心到两边全部都是在渐变的，而选择器是中间某一个范围内都是黑色，越过一个范围突然开始渐变的。这里修改
-webkit-linear-gradient变为：
background:-webkit-linear-gradient(top, rgb(255, 255, 255) 0, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.5) 55%, rgb(255, 255, 255) 100%);}
当然这个停顿百分比需要仔细计算
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="format-detection" content="telephone=no"> 6 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <title>时间日期选择器</title> 8 <style> 9 body{margin:0;} 10 ul{margin:0;padding:0;list-style:none; 11 -webkit-transition:transform 1s; 12 } 13 img{text-align:center;line-height:30px;font-size:1.1em; 14 -webkit-transition:opacity 1s, transform 1s;position:absolute;right:50%;top:60px; 15 } 16 .picker{position:relative;height:180px;} 17 .picker_ul{position: absolute;z-index:1;width:100%;overflow:hidden;height:100%;} 18 .picker_panel{position:absolute;z-index:2;width:100%;height:100%;top:0; 19 background:-webkit-linear-gradient(top, rgb(255, 255, 255) 0, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.5) 55%, rgb(255, 255, 255) 100%);} 20 </style> 21 </head> 22 <body> 23 <div id="demo2"> 24 <div class="picker"> 25 <ul class="picker_ul"> 26 <img src="favicon.ico" style="transform:rotateX(-72deg) translateZ(77px);"> 27 <img src="favicon.ico" style="transform:rotateX(-36deg) translateZ(77px);"> 28 <img src="favicon.ico" style="transform:rotateX(0deg) translateZ(77px);"> 29 <img src="favicon.ico" style="transform:rotateX(36deg) translateZ(77px);"> 30 <img src="favicon.ico" style="transform:rotateX(72deg) translateZ(77px);"> 31 <img src="favicon.ico" style="transform:rotateX(108deg) translateZ(77px);"> 32 <img src="favicon.ico" style="transform:rotateX(144deg) translateZ(77px);"> 33 <img src="favicon.ico" style="transform:rotateX(180deg) translateZ(77px);"> 34 <img src="favicon.ico" style="transform:rotateX(216deg) translateZ(77px);"> 35 <img src="favicon.ico" style="transform:rotateX(252deg) translateZ(77px);"> 36 </ul> 37 <div class="picker_panel"></div> 38 </div> 39 </div> 40 <script src="lib/zepto.js"></script> 41 </body> 42 </html>
这个效果是不是好多了
回归正题
将上述研究应用到数字上，就是我们的成果了
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="format-detection" content="telephone=no"> 6 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <title>时间日期选择器</title> 8 <style> 9 body{margin:0;} 10 #demo2 ul{margin:0;padding:0;list-style:none; 11 -webkit-transition:transform 1s; 12 } 13 #demo2 li{text-align:center;line-height:30px;font-size:1.5em; 14 -webkit-transition:opacity 1s, transform 1s;position:absolute;right:50%;top:60px; 15 } 16 ul{margin:0;padding:0;list-style:none; 17 } 18 li{text-align:center;line-height:30px;font-size:1.1em; 19 } 20 .picker{position:relative;height:150px;} 21 .picker_ul{position: absolute;z-index:1;width:100%;overflow:hidden;height:100%;} 22 .picker_panel{position:absolute;z-index:2;width:100%;height:100%;top:0; 23 background:-webkit-linear-gradient(top, rgb(255, 255, 255) 0, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.5) 55%, rgb(255, 255, 255) 100%);} 24 .picker_line{position:absolute;top:50%;margin-top:-15px;border-top:1px solid #aaa;border-bottom:1px solid #aaa;height:30px;width:100%;} 25 </style> 26 </head> 27 <body> 28 <div id="demo2"> 29 <div class="picker"> 30 <ul class="picker_ul"> 31 <li style="-webkit-transform: rotateX(-72deg) translateZ(48px);">10</li> 32 <li style="-webkit-transform: rotateX(-36deg) translateZ(48px);">11</li> 33 <li style="-webkit-transform: rotateX(0deg) translateZ(48px);">12</li> 34 <li style="-webkit-transform: rotateX(36deg) translateZ(48px);">13</li> 35 <li style="-webkit-transform: rotateX(72deg) translateZ(48px);">14</li> 36 </ul> 37 <div class="picker_panel"></div> 38 <div class="picker_line"></div> 39 </div> 40 </div> 41 <div id="demo"></div> 42 <script src="lib/zepto.js"></script> 43 <!--script src="http://www.mamicode.com/js/picker.js"></script--> 44 </body> 45 </html>
iPhone日历选择器效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。