js实现移动端编辑添加地址【模仿京东】 - 行业资讯 - 肥雀云

<>强效果图:

　　& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最大范围=1,user-scalable=不,”比; 　　& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘,chrome=1”比; 　　& lt; title> Examples 　　& lt;元名称=懊枋觥蹦谌?氨? 　　& lt;元名称=肮丶省蹦谌?氨? 　　& lt;风格类型=" text/css "比; 　　html,身体{ 　　字体大小:10 px 　　} 　　@media屏幕和(min-width: 321 px)和(max-width: 375 px) { 　　html { 　　字体大小:10 px 　　} 　　} 　　@media屏幕和(min-width: 376 px)和(max-width: 414 px) { 　　html { 　　字体大小:10 px 　　} 　　} 　　@media屏幕和(min-width: 415 px)和(max-width: 639 px) { 　　html { 　　字体大小:12 px 　　} 　　} 　　@media屏幕和(min-width: 640 px)和(max-width: 719 px) { 　　html { 　　字体大小:12 px 　　} 　　} 　　@media屏幕和(min-width: 720 px) { 　　html { 　　字体大小:16 px 　　} 　　} 　　html、身体ol, ul, li, div,输入、标签、形式、文本区域、跨度、h2、h3, h4, h5,类推,h7, p { 　　填充:0; 　　保证金:0; 　　粗细:正常; 　　box-sizing: border-box 　　} 　　html,身体{ 　　arial字体类型:“微软YaHei”; 　　宽度:100%; 　　高度:汽车; 　　overflow-x:隐藏　　} 　　文章,我一边,细节、figcaption图,页脚,页眉,hgroup,主要导航,部分,总结{ 　　显示:块　　} 　　ul、ul李{ 　　list-style-type:没有　　} 　　一个{ 　　大纲:没有; 　　文字修饰:没有; 　　颜色:黑色　　} 　　img { 　　大纲:没有!重要; 　　边界:没有　　} 　　输入、textarea { 　　大纲:没有; 　　arial字体类型:“微软YaHei”; 　　字体大小:1.6快速眼动　　} 　　头。公共头{ 　　高度:50 px; 　　填充:0 10 px; 　　背景:白色; 　　位置:固定; 　　左:0; 　　右:0; 　　上图:0; 　　z - index: 99; 　　不必:0 px 1 px 10 px rgba (0, 0, 0, 0.08); 　　-moz-box-shadow: 0 px 1 px 10 px rgba (0, 0, 0, 0.08); 　　-webkit-box-shadow: 0 px 1 px 10 px rgba (0, 0, 0, 0.08); 　　}/* public-banner */头。公共头. .public-header-content { 　　宽度:100%; 　　} 　　头。公共头.public-header-content .public-logo一个{ 　　显示:块; 　　高度:50 px; 　　宽度:170 px; 　　} 　　头。公共头.public-logo img { 　　高度:100%; 　　宽度:100%; 　　} 　　头。公共头.public-header-content .btn-back { 　　位置:绝对的; 　　左:0.5快速眼动; 　　上图:1快速眼动; 　　字体大小:3快速眼动; 　　} 　　头。{后公共头.public-header-content .btn-back:: 　　内容:“”; 　　高度:15 px; 　　宽度:15 px; 　　border-left: 1 px固体# 393 a3f; 　　边界底部:1 px固体# 393 a3f; 　　背景:白色; 　　位置:绝对的; 　　左:10 px; 　　上图:5 px; 　　变换:旋转(45度); 　　-webkit-transform:旋转(45度); 　　-moz-transform:旋转(45度); 　　-ms-transform:旋转(45度) 　　} 　　头。公共头.public-header-content h2 { 　　字体大小:1.8快速眼动; 　　text-align:中心; 　　行高:50 px; 　　}/*形式的班级*/.form-group { 　　高度:40像素; 　　行高:40像素; 　　填充:0 10 px; 　　位置:相对　　} 　　{后.form-group:: 　　边界底部:1 px固体# ccc; 　　内容:' '; 　　显示:块; 　　宽度:100%; 　　位置:绝对的; 　　左:0; 　　底部:0; 　　-webkit-transform-origin:左底; 　　-webkit-transform:写入scaleY (0.5); 　　变换:写入scaleY (0.5) 　　} 　　.form-group .form-label { 　　字体大小:1.6快速眼动　　} 　　.form-group .input-flex { 　　flex: 1; 　　-webkit-flex: 1; 　　-moz-flex: 1; 　　ms-flex: 1; 　　边界:没有; 　　字体大小:1.4快速眼动　　} 　　.icon-trangle { 　　高度:10 px; 　　宽度:10 px; 　　border-top: 1 px固体# B1B0B0; 　　边境:1 px固体# B1B0B0; 　　背景:白色; 　　位置:绝对的; 　　右:10 px; 　　上图:15 px; 　　变换:旋转(45度); 　　-webkit-transform:旋转(45度); 　　-moz-transform:旋转(45度); 　　-ms-transform:旋转(45度) 　　}/* toogle-address-mask */.toogle-address-mask { 　　高度:100%; 　　宽度:100%; 　　位置:固定; 　　左:0; 　　右:0; 　　底部:0; 　　上图:0; 　　背景:rgba (0, 0, 0, 0.2); 　　z - index: 99; 　　透明度:0 　　} 　　.toogle-address { 　　身高:300 px; 　　宽度:100%; 　　背景:白色; 　　位置:固定; 　　z - index: 99; 　　底部:-300 px; 　　左:0; 　　} 　　.toogle-address .toogle-address-title { 　　高度:40像素; 　　行高:40像素; 　　字体大小:1.6快速眼动; 　　text-align:中心　　} 　　.icon-close { 　　高度:25 px; 　　宽度:25 px; 　　显示:块; 　　位置:绝对的; 　　右:10 px; 　　上图:5 px; 　　背景:红色; 　　background-size: 15 px 15 px; 　　} 　　.address { 　　宽度:100%; 　　位置:相对; 　　字体大小:1.4快速眼动; 　　} 　　.address-header { 　　高度:40像素; 　　行高:40像素; 　　边界底部:1 px固体# eaeaea; 　　填充:0 10 px; 　　} 　　.address-header .address-info { 　　字体大小:1.4快速眼动; 　　浮:左; 　　填充:0 5 px; 　　} 　　.address-content { 　　宽度:100%; 　　身高:320 px; 　　溢出:隐藏; 　　} 　　.address-now { 　　位置:相对; 　　} 　　{后.address-now:: 　　位置:绝对的; 　　内容:“”; 　　左:0; 　　底部:0; 　　背景:# 008等于off; 　　高度:2 px; 　　宽度:100%; 　　} 　　.box-flex { 　　显示:-webkit-flex; 　　显示:-moz-flex; 　　显示:-ms-flex; 　　显示:flex 　　} 　　.flex { 　　flex: 1; 　　-webkit-flex: 1; 　　-moz-flex: 1; 　　ms-flex: 1 　　} 　　.address-cont { 　　身高:320 px; 　　显示:flex; 　　显示:-webkit-flex; 　　显示:-moz-flex; 　　显示:-ms-flex; 　　宽度:300%; 　　overflow-y:滚动; 　　} 　　.provienc-part、.city-part .county-part { 　　高度:100%; 　　宽度:100%; 　　} 　　.provienc-part {/*背景:红色;*/} 　　.city-part {/*背景:绿色;*/} 　　.county-part {/*背景:黄色;*/} 　　.address-cont ul { 　　填充:0.5雷姆1快速眼动; 　　} 　　李.address-cont ul { 　　字体大小:1.4快速眼动; 　　填充:0.5雷姆0; 　　} 　　.liNow { 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null