哎,说多了都是泪;
引入相关 JS 文件
- <script type="text/javascript" src="js/jquery-1.9.1.min.js">
- </script>
- <script type="text/javascript" src="js/iscroll.js">
- </script>
样式
- /*日期选择*/
- .date{
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- display: none;
- background-color:rgba(0,0,0,.3);
- }
- .date .date-piker{
- width:750px;
- background-color:#fff;
- font-size:26px;
- position:absolute;
- bottom:0
- }
- .date .date-piker .tit{
- height:80px;
- line-height:80px;
- background-color:#f4f4f4;
- color:#474747;
- padding:0 26px;
- text-align:center
- }
- .date .date-piker .tit a{
- color:#ff6315;
- float:left
- }
- .date .date-piker .tit a:last-child{
- float:right
- }
- .date .time-box{
- height: 420px;
- overflow: hidden;
- position: relative;
- width: 100%;
- padding:0 45px
- }
- .date .time-choose{
- height: 70px;
- border-top:1px solid #efefef;
- border-bottom:1px solid #efefef;
- position: absolute;
- top: 140px;
- left:-90px;
- width: 100%;
- background-color:#fff
- }
- .date .time-01, .time-02, .time-03{
- position:absolute;
- z-index: 3;
- height:420px;
- overflow:hidden
- }
- .date .time-02{
- left:240px
- }
- .date .time-03{
- left:480px
- }
- .date .time-box li{
- height:70px;
- line-height:70px;
- color:#474747;
- text-align: center;
- font-family:Helvetica;
- width: 220px
- }
html 代码实现
- 保养时间
- 4月
- 5月
- 6月
- 7月
- 1日
- 2日
- 3日
- 4日
- 5日
- 10:00
- 15:00
- 16:00
- 17:00
- 18:00
JS 效果添加
- /*日期选择*/
- /*此处存在问题 这个时间上 关于月份 每个天数都不一样 需要动态生成*/
- $('.date_sure').click(function(){
- $('.date').show();
- //滚动效果
- scrolling();
- //确认结果
- $('#sure').click(function(){
- if(getContent("#month")){
- //获取各个div中ul li中选中的内容
- $('.date_sure').html(getContent("#month") +getContent("#date")+' '+ getContent("#time"));
- $('.date').hide();
- }
- });
- $('#kidding').click(function(){
- $('.date').hide();
- });
- var myScroll;
- function scrolling(){
- myScroll = new IScroll('#date', {
- scrollY: true,
- momentum: false,
- snap: 'li'
- });
- myScroll = new IScroll('#time', {
- scrollY: true,
- momentum: false,
- snap: 'li'
- });
- myScroll = new IScroll('#month', {
- scrollY: true,
- momentum: false,
- snap: 'li'
- });
- }
- function getContent(ele){
- //找到里层div
- var $content = $(ele).find('div');
- //获取一个li的高度
- var _height=$(ele).find('li').height();
- //为内层div添加transform移动效果
- var tran = $content.CSS('transform');
- var topArray=[];
- //将获取到的内容 变成数组 最后一个为移动距离top
- topArray=tran.split(',');
- var top=Math.floor(parseFloat(topArray[5]));
- //获取到移动的个数 减去空的两个li
- var num=top/_height-2;
- //返回对应选择出来的li的内容
- return $(ele+" li").eq(-num).text();
- }
- });
完成了 这个日期的选择
来源: http://www.bubuko.com/infodetail-1947093.html