js实现移动端编辑添加地址【模仿京东】
(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )
效果图：
注：这里的数据格式用的是jsonp，json在这里存在跨域问题
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no,">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
html, body {
font-size: 10px
}
@media screen and (min-width:321px) and (max-width:375px) {
html {
font-size: 10px
}
}
@media screen and (min-width:376px) and (max-width:414px) {
html {
font-size: 10px
}
}
@media screen and (min-width:415px) and (max-width:639px) {
html {
font-size: 12px
}
}
@media screen and (min-width:640px) and (max-width:719px) {
html {
font-size: 12px
}
}
@media screen and (min-width:720px) {
html {
font-size: 16px
}
}
html, body, ol, ul, li, a, div, input, label, form, textarea, span, h1, h2, h3, h4, h5, h6, p {
padding: 0;
margin: 0;
font-weight: normal;
box-sizing: border-box
}
html, body {
font-family: "microsoft YaHei", arial;
width: 100%;
height: auto;
overflow-x: hidden
}
i, article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block
}
ul, ul li {
list-style-type: none
}
a {
outline: none;
text-decoration: none;
color: black
}
img {
outline: none !important;
border: none
}
input, textarea {
outline: none;
font-family: "microsoft YaHei", arial;
font-size: 1.6rem
}
header.public-header {
height: 50px;
padding: 0 10px;
background: white;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 99;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
}
/* public-banner */
header.public-header ..public-header-content {
width: 100%;
}
header.public-header .public-header-content .public-logo a {
display: block;
height: 50px;
width: 170px;
}
header.public-header .public-logo img {
height: 100%;
width: 100%;
}
header.public-header .public-header-content .btn-back {
position: absolute;
left: 0.5rem;
top: 1rem;
font-size: 3rem;
}
header.public-header .public-header-content .btn-back::after{
content: "";
height: 15px;
width: 15px;
border-left: 1px solid #393a3f;
border-bottom: 1px solid #393a3f;
background: white;
position: absolute;
left: 10px;
top: 5px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg)
}
header.public-header .public-header-content h1 {
font-size: 1.8rem;
text-align: center;
line-height: 50px;
}
/* form-group */
.form-group {
height: 40px;
line-height: 40px;
padding: 0 10px;
position: relative
}
.form-group::after {
border-bottom: 1px solid #ccc;
content: ' ';
display: block;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
-webkit-transform-origin: left bottom;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5)
}
.form-group .form-label {
font-size: 1.6rem
}
.form-group .input-flex {
flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
ms-flex: 1;
border: none;
font-size: 1.4rem
}
.icon-trangle {
height: 10px;
width: 10px;
border-top: 1px solid #B1B0B0;
border-right: 1px solid #B1B0B0;
background: white;
position: absolute;
right: 10px;
top: 15px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg)
}
/* toogle-address-mask */
.toogle-address-mask {
height: 100%;
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 99;
opacity: 0
}
.toogle-address {
height: 300px;
width: 100%;
background: white;
position: fixed;
z-index: 99;
bottom: -300px;
left: 0;
}
.toogle-address .toogle-address-title {
height: 40px;
line-height: 40px;
font-size: 1.6rem;
text-align: center
}
.icon-close {
height: 25px;
width: 25px;
display: block;
position: absolute;
right: 10px;
top: 5px;
background: red;
background-size: 15px 15px;
}
.address {
width: 100%;
position: relative;
font-size: 1.4rem;
}
.address-header {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #eaeaea;
padding: 0 10px;
}
.address-header .address-info {
font-size: 1.4rem;
float: left;
padding: 0 5px;
}
.address-content {
width: 100%;
height: 320px;
overflow: hidden;
}
.address-now {
position: relative;
}
.address-now::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
background: #008aff;
height: 2px;
width: 100%;
}
.box-flex {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex
}
.flex {
flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
ms-flex: 1
}
.address-cont {
height: 320px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
width: 300%;
overflow-y: scroll;
}
.provienc-part, .city-part, .county-part {
height: 100%;
width: 100%;
}
.provienc-part {
/* background: red; */
}
.city-part {
/* background: green; */
}
.county-part {
/* background: yellow; */
}
.address-cont ul{
padding: 0.5rem 1rem ;
}
.address-cont ul li {
font-size: 1.4rem;
padding: 0.5rem 0;
}
.liNow {
color: #008aff;
}
#city, #county {
display: none;
}
/* Address part */
.section-address {
margin-top: 50px;
}
</style>
</head>
<body class="">
<!-- public Header start-->
<header class="public-header">
<div class="public-header-content clearfixed">
<a href="javascript:history.back()" rel="external nofollow" class="btn btn-back">
</a>
<h1>配送地址</h1>
</div>
</header>
<!-- public Header end-->
<!-- Address start -->
<section class="section-address bg-eae pt-5">
<form action='#' method="post" class="bg-fff">
<div class="form-group box-flex clearfixed">
<label class="form-label">收件人：</label>
<input type="text" name="" class="input-flex" placeholder="请输入姓名">
</div>
<div class="form-group box-flex clearfixed">
<label class="form-label">联系电话：</label>
<input type="text" name="" class="input-flex" placeholder="请输入收件人电话">
</div>
<div class="form-group box-flex clearfixed">
<label class="form-label">配送区域：</label>
<div id="address" class="flex address"></div>
<i class="icon icon-trangle"></i>
</div>
</form>
</section>
<!-- Address end -->
<script src="/UploadFiles/2021-04-02/jquery.js">
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持!
下一篇：angularjs中使用ng-bind-html和ng-include的实例