jquery实现手机端移动端省市区弹出滑动选择器效果代码-html代码-BFW代码库

代码语言：html

所属分类：选择器

代码描述：jquery实现手机端移动端省市区弹出滑动选择器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">
    <meta name="format-detection" content="telphone=no" />
    <style>
        @media screen and (max-width: 760px) {
   .hide{
        display: none!important;
        z-index: 9999!important;
   }
   .Provincial_urban_areas{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10000;
   }
   .Provincial_urban_areas1{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(0,0,0,0.6);
   }
   .Provincial_urban_areas2{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        background-color: #fff;
        transform: translateY(150%);
        transition: all 0.4s ease;
   }
   .Provincial_urban_areas2_tr{
        transform: translateY(0%)!important;
   }
   .betterHome{
        display: flex;
   }
   .betterHeader{
        height: 6rem;
        background-color: #fff;
        position: relative;
        width: 100%;
   }
   .betterHeader1 {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
        height: 100%;
        overflow: hidden;
        padding-top: 2rem;
   }
   .betterHeader1 .wheel-scroll .wheel-item{
        text-align: center;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:0.24rem;
   }
   .li_color{
        color: #fff!important;
   }
   .li_position{
        position: absolute;
        top: 1.97rem;
        width: 100%;
        z-index: 0;
        height: 1rem;
        background-color: #29A7FA;
   }
   
   .Provincial_urban_areas2_xuanze{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.1rem 0.3rem 0.2rem 0.3rem;
        border-bottom: 1px solid rgba(241,241,241,0.8);
   }
   .Provincial_urban_areas2_xuanze span{
        cursor: pointer;
        display: block;
        color: #fff;
        padding: 0.1rem 0.3rem;
        border-radius: 0.1rem;
        background-color: rgba(200,200,200,0.8);
        font-size: 0.28rem;
   }
   .Provincial_urban_areas2_xuanze span:last-child{
        background-color: #29A7FA;
   }
}


@media screen and (min-width:760px) {
        .hide{
                display: none!important;
                z-index: 9999!important;
        }
        .Provincial_urban_areas{
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 10000;
        }
        .Provincial_urban_areas1{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                background-color: rgba(0,0,0,0.6);
        }
        .Provincial_urban_areas2{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 2;
                background-color: #fff;
                transform: translateY(150%);
                transition: all 0.4s ease;
        }
        .Provincial_urban_areas2_tr{
                transform: translateY(0%)!important;
        }
        .betterHome{
                display: flex;
        }
        .betterHeader{
                height: 4rem;
                background-color: #fff;
                position: relative;
                width: 100%;
        }
        .betterHeader1 {
                position: absolute;
                top: 0;
                width: 100%;
                z-index: 2;
                height: 100%;
                overflow: hidden;
                padding-top: 1.95rem;
        }
        .betterHeader1 .wheel-scroll .wheel-item{
                text-align: center;
                height: 0.5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size:0.14rem;
        }
        .li_color{
                color: #fff!important;
        }
        .li_position{
                position: absolute;
                top: 1.97rem;
                width: 100%;
                z-index: 0;
                height: 0.5rem;
                background-color: #29A7FA;
        }
        
        .Provincial_urban_areas2_xuanze{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.1rem 0.2rem;
                border-bottom: 1px solid rgba(241,241,241,0.8);
        }
        .Provincial_urban_areas2_xuanze span{
                cursor: pointer;
                display: block;
                color: #fff;
                padding: 0.05rem 0.24rem;
                border-radius: 0.1rem;
                background-color: rgba(200,200,200,0.8);
                font-size: 0.14rem;
        }
        .Provincial_urban_areas2_xuanze span:last-child{
                background-color: #29A7FA;
        }
}

@charset "utf-8";
/*CSS reset*/
*{margin: 0;padding: 0;}
html{width: 100%;height: 100%;background: #f5f5f5;background-size: cover;}body{font-size: 0.3rem;font-family: 'Arial';color: #333;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;word-wrap:break-word;box-sizing: border-box;outline: none;-webkit-tap-highlight-color:transparent;}
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}   ol,li ul{margin:0; padding:0;}
body{-webkit-overflow-scrolling: touch;padding-right: calc(100vw - 100%);}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit; outline: none;-webkit-appearance: none;appearance.........完整代码请登录后点击上方下载按钮下载查看