jquery实现手机端移动端省市区弹出滑动选择器效果代码
代码语言：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;
" />
</div>
<div id="urban1">
<input id="input1" type="text" readonly="readonly" class="areas" placeholder="选择省市区222" 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;
" />
</div>
<div id="urban2">
<input type="text" readonly="readonly" id="input2" class="areas" placeholder="选择省市区333" 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;
" />
</div>
<script>
(function () {
// 手机页面rem适应
var currClientWidth,
fontValue,
originWidth;
originWidth = 750; //ui设计稿的宽度，一般750或640
__resize();
window.addEventListener('resize', __resize, false);
function __resize() {
currClientWidth = document.documentElement.clientWidth;
if (currClientWidth > 768) {
currClientWidth = 768;
}
if (currClientWidth < 320) {
currClientWidth = 320;
}
fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
document.documentElement.style.fontSize = fontValue + '%';
}
})();
/**
* 文本框根据输入内容自适应高度
* @param {HTMLElement} 输入框元素
* @param {Number} 设置光标与输入框保持的距离(默认0)
* @param {Number} 设置最大高度(可选)
*/
var autoTextarea = function (elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.resize = 'none';
var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};
addEvent('propertychange�.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0