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: none;}
input,button,textarea,select{border-radius:0;border: 0;}
img,input{ display: block; margin: 0; padding: 0; border: 0 none; outline-style: none;}
input{vertical-align: bottom; appearance:button; -moz-appearance:button; /*Firefox*/-webkit-appearance:button; /*Safari和Chrome*/; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0; outline:none;
  -webkit-tap-highlight-color:transparent;}
a,a:active,a:visited{text-decoration: none;color: #ccc;}
a:hover{color:#333;}
i{font-style: normal;}

/* iphone底部填充物 */
.filler{width: 100%;height: 1.5rem;}
/* 常用类名基础样式 */
/* 浮动清浮动 */
.fl{float: left;}
.fr{float: right;}
.clearfix:after {content: " ";display: block;clear: both;height: 0;}
.clearfix {zoom: 1;}
/* 显示影藏 */
.hide{display: none;}
.show{display: block;}
/* 遮罩层 */
.zec{position: fixed;height: 100%;width: 100%;left: 0;top: 0;background: rgba(0,0,0,.2);z-index: 99;}
.zec .content{ position: absolute; left: 50%;background: #fff; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }
/* 超出隐藏 */
.nowap1{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.nowap2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.nowap3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
/* 指定某个给定的区域是否允许用户操作，以及如何响应用户操作 */
/* * { touch-action: pan-y; }  */
/* 字体加粗 */
.bold{
  font-weight: bold;
}
/* 字体居 */
.right{
  text-align: right;
}
.center{
  text-align: center;
}
.left{
  text-align: left;
}
/* 定位方式 */
.absolute{
  position: absolute;
}
.realtive{
  position: relative;
}
.fixed{
  position: fixed;
}
/* 盒子外部阴影 */
.out-shadow{box-shadow: 0 0 10px #ECECEC;}
/* 图片高度自适应 */
.img-box{padding-bottom:100%;position: relative;}
.img-box img{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;}

/* 主题色彩 */
.color-fff {
  color: #fff;
}
.color{
  color: #F15C31;
}
.color-999{
  color: #999;
}
.color-666{
  color: #666;
}
.background {
  background: #F15C31;
}
.background-fff {
  background: #fff;
}
/* 改变layer的提示框位置 */
.layui-m-layer .layui-m-layer-msg{
	bottom: 0!important;
}
.index{
	min-height: 100vh;
	background-color: #fff;
	padding-bottom:1rem ;
}
.index1{
	padding-bottom:0.6rem ;
}




/* 兼容iphoneX */
@supports (bottom: constant(safe-area-inset-bottom)) {
  body:before,
  body:after {
    content: '';
    display: block;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
  }
  body:before {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: #fff;
    background-image: -webkit-linear-gradient(#eee, #fff);
    background-image: linear-gradient(#eee, #fff);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 8px;
  }
}

/*适配苹果X*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  #btn{
    padding-bottom:30px !important;
}
}

/*适配苹果X smart Max*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  #btn{
    padding-bottom:30px !important;
}
}

/*适配苹果XR */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) {
  #btn{
    padding-bottom:30px !important;
}
}

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  #btn{
    padding-bottom:30px !important;
}
}




/* 手机客户端webview 只使用－webkit内核方式即可 */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
  font-size: 0.3rem;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999;
  font-size: 0.3rem;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999;
  font-size: 0.3rem;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999;
  font-size: 0.3rem;
}
/* CSS定义input disabled样式的三种方法 */

input:disabled{
  /* border: 1px solid #DDD; */
  /* background-color: #F5F5F5; */
  /* color:#ACA899;opacity: 1; */
  color: #0067C5;
  opacity:1
}

input[disabled]{
  /* border: 1px solid #DDD;
  background-color: #F5F5F5;
  color:#ACA899;opacity: 1; */
  color: #0067C5;
  opacity:1
}

* html input.disabled{
  /* border: 1px solid #DDD;
  background-color: #F5F5F5;
  color:#ACA899;opacity: 1; */
  color: #0067C5;
  opacity:1
}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/better_scroll.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/city-picker.data.js"></script>

</head>

<body>

    <div id="urban">
        <input id="input" type="text" readonly="readonly" class="areas" placeholder="选择省市区111" style="border: 1px solid rgba(210,210,210,0.8);
					width: 80%;
					margin: 0.3rem auto;
					padding: 0.15rem 0.3rem;
					border-radius: 0.2rem;
				" /&.........完整代码请登录后点击上方下载按钮下载查看