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="js/picker.js"></script-->
44 </body>
45 </html>

时间： 2024-10-12 20:43:56

iPhone日历选择器效果的相关文章

CSS3模拟实现iphone返回按钮效果

CSS3模拟实现iphone返回按钮效果:大家知道现在CSS3可以实现各种漂亮的效果,以前只有图片可以实现的效果,现在CSS3实现起来难度也不是太高.下面分享一段使用CSS3实现的iphone返回按钮的效果,其实这种CSS3代码根本就不用分析,只要给出代码实例,自己就完全可以看明白,当然你要首先知道各个属性的作用是什么,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q

iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

为什么 iPhone 的拍照效果比其它手机优秀？

知乎用户提问:影像行业不是需要很多年的积累才能有优异的表现吗?iPhone 的影像基础从何而来,索尼有柯尼卡美能达的基础为何在手机成像上反而做不过苹果?为什么苹果在没有任何影像基础(恐是不實描述)的情况下制造出了拍照效果比其他手机优秀的 iPhone? <<<------------- <_< 向左看知乎用户回答: 知乎用户:李楠实际上,主流手机厂商的摄像头供货商就是那么几家.而 Sony 就是 iPhone 的主要摄像头供货商的一家.(另外一家是 omnivision

jQuery 制作逼真的日历翻转效果的倒计时

在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在线演示插件下载调用方法: $(function() { $(".digits").countdown({ image: "digits.png", format: "mm:ss", startTime: "25:14"

Android课程---日历选择器和时间选择器

package com.hanqi.test5; import android.os.Bundle; import android.support.annotation.IdRes; import android.support.v7.app.AppCompatActivity; import android.widget.CheckBox; import android.widget.CompoundButton; import android.widget.DatePicker; impor

css3实现渐变的iPhone滑动解锁效果

先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line-height:50px; font-size:50px; text-align:center; -webkit-background-clip: text; /*按文字裁剪*/ -webkit-text-fill-color: transparent; /*文字的颜色使用背景色*/ background-c

WPF触控程序开发(三)——类似IPhone相册的反弹效果

用过IPhone的都知道,IPhone相册里,当图片放大到一定程度后,手指一放,会自动缩回,移动图片超出边框后手指一放,图片也会自动缩回,整个过程非常和谐.自然.精确,那么WPF能否做到呢,答案是肯定的. 在没有现成的控件的情况下,只有自己做,你肯定想到做动画,WPF触屏开发提供了相应的功能来获取触控点的一些变化,这些变化的最佳消费者个人认为是Matrix.我们回想下做动画一般怎么做,比如给一个button做个宽度增5的动画,我们一般是定义一个DoubleAnimation,然后定义一个Sotr

模仿 Antd 写一个年份的时间选择器

说明: 这篇文章复制不可用,代码真多,编辑不易.有需要联系我,谢谢. 功能介绍: 1.可以设置可选择的时间范围,范围超出部分置灰不可选择 2.点击空白处默认收起弹窗,也可以在外部通过 open 属性控制 3.按确定按钮后过 onOk 属性返回一个函数,第一个参数为选择的时间改进方向: 若有时间,我希望弹窗中的确定按钮可以由用户选择,是否需要使用. 当用户决定不使用确定按钮时,选择时间后弹窗自动收起,并且把选择的时间返出去. 大家若有什么好的建议,我也会采纳,主要是得有时间,?? 吐槽一下:

Ripple 水波纹效果

背景+波纹对于有边界限制的Ripple,我们就需要给他提供一个范围,即添加一个item标签. 如果在一个ripple标签中,添加一个item标签,在item中添加如下属性: [android:drawable="@color/***"]水波效果会限定在本身矩形区域内部 [android:drawable="@drawable/png等"]水波效果会限定在图片中非透明部分对应的区域内部 [android:drawable="@color/shape&quo

iPhone日历选择器效果

开始

第二步 非当前值置灰

回归正题

iPhone日历选择器效果的相关文章

第二步非当前值置灰