模拟了个iphone上面的select框 需要下载iscroll

不说了  直接上代码

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,max-scale=1.0,user-scalable=0;" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
            *{margin:0; padding:0; list-style:none;}
            .selectId{ width:150px; height:40px; line-height:40px; text-align:center;background:#555; color:#FFF;}
            #selectBox{width:320px;}
            #selectBar{padding:5px; background:rgba(0,0,0,0.5);border-top:1px solid #000; -webkit-box-shadow:0 1px 1px #d4d4d4 inset;}
            #selectBar:after{content:""; clear:both;display:table;}
            #selectBar span{
                float:left; padding:5px; font-size:11px;
                background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(50%,#313131),color-stop(51%,black),color-stop(100%,black));
                border-radius:5px; color:#a1a0a0; -webkit-box-shadow:0 1px 1px #191b1f inset,0 -1px 1px #9f9f9f inset;font-weight:bold;}
            #selectBar span:nth-child(1){-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0; border-right:1px solid #9b9999; margin-left:5px;}
            #selectBar span:nth-child(2){-webkit-border-top-left-radius:0;-webkit-border-bottom-left-radius:0;}
            #selectBar span:nth-child(3){margin-left:10px; padding:5px 8px;}
            #selectBar span:nth-child(4){background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6b87d8),color-stop(50%,#7595f0),color-stop(51%,#0e60f6),color-stop(100%,#4180f4)); float:right; color:#FFF;padding:5px 8px; cursor:pointer;}
            #selectList{ 
                height:200px; padding:8px 10px;
                background:-webkit-gradient(linear,left top, left bottom,color-stop(0%,rgba(88,112,179,0.5)),color-stop(50%,rgba(88,112,179,0.8)),color-stop(51%,rgba(74,86,128,0.8)),color-stop(0%,rgba(74,86,128,0.5)))}
            
            #selectList #selectLi{ width:100%; height:100%;background:-webkit-gradient(linear,left top, left bottom,color-stop(0%,#3b3939),color-stop(20%,#ffffff),color-stop(80%,#ffffff),color-stop(100%,#3b3939));  -webkit-box-sizing:border-box;overflow:hidden;  border-radius:5px; }
            #selectList #selectLi ul li{ font-size:24px; line-height:44px;height:44px;padding:0 10px 0 40px;}
            #selectList #selectLi ul li.current{ color:#376dd1;position:relative;}
            #selectList #selectLi ul li.current:after{position:absolute; content:"√"; color:#376dd1; display:block; width:40px; height:40px; visibility:visible; top:3px;left:16px;}
        </style>
    </head>
    <body>
        <div class="selectId" id="selectId">选择</div>
        <div id="selectBox" style="visibility:hidden">
            <div id="selectBar">
                <span id="before_btn">前一项</span>
                <span id="after_btn">后一项</span>
                <span id="auto_btn">自动填充</span>
                <span id="complete_btn">完成</span>
            </div>
            <div id="selectList" >
                <div id="selectLi">
                    <ul>
                        <li>请选择1</li>
                        <li>请选择2</li>
                        <li>请选择3</li>
                        <li>请选择4</li>
                        <li>请选择5</li>
                        <li>请选择6</li>
                        <li>请选择7</li>
                        <li>请选择8</li>
                        <li>请选择9</li>
                        <li>请选择10</li>
                        <li>请选择11</li>
                        <li>请选择12</li>
                        <li>请选择13</li>
                        <li>请选择14</li>
                        <li>请选择15</li>
                        <li>请选择16</li>
                        <li>请选择17</li>
                        <li>请选择18</li>
                    </ul>
                </div>
            </div>
        </div>

        <script type="text/javascript" src ="themes/js/iscroll-min.js"></script>
        <script>
        var myScroll;
        function loaded() {
            myScroll = new iScroll("selectLi",{
                hScrollbar:false,
                vScrollbar:true,
            });
        }
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

        </script>
        <script>
        (function(){
            var selectId = document.getElementById("selectId");
            var complete_btn = document.getElementById("complete_btn");
            var selectBox = document.getElementById("selectBox");
            var selectList = document.getElementById("selectList");
            var selectUl = selectList.getElementsByTagName("ul")[0];
            var liList = selectUl.getElementsByTagName("li");
            var ListLength = liList.length;
            var isClicked = false;
            var tag=0;
            selectId.onclick = function(){
                selectBox.style.visibility ="visible";
            };
            complete_btn.onclick = function(){
                selectBox.style.visibility ="hidden";
            };
            for(var i = 0; i < ListLength; i++){
                liList[i].addEventListener("click",postText);
                liList[i].onclick =(function(i){
                    return function(){
                        if(i!=tag){
                            liList[tag].removeAttribute("class");
                        }
                        isClicked = !isClicked; 
                        liList[i].setAttribute("class","current");
                        tag = i;
                    }
                })(i);
            }
            function postText(){
                selectTD = this.innerHTML;
                selectId.innerHTML = selectTD;
            }
        })();
        </script>
    </body>
</html>

注:需要下载iscroll 改下路径

bug:当整个设置为display:none的时候貌似iscroll获取不了高度 滚不起来。。还没想到办法 所以改成了visibility来隐藏 不过 也有个bug 就是那个勾 我用after写的 整个隐藏后 那个勾依然在页面上。

也请哪位知道的大神指导下。

图一张

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xingmi/p/2647853.html