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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0