booking.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/booking.css" />
</head>
<body>
<!--
功能需求分析:
1.城市互换:改变定位,添加动画属性
2.交换图片沿z轴旋转属性:transform:rotate(deg),添加动画属性
3.城市选取:由点击元素决定更改的城市应该添加到哪里
-->
<div class="wrap">
<!--主图区-->
<div class="main">
<img src="images/bg.jpg">
<div class="content">
<span class="before">上海</span>
<div class="change"></div>
<span class="before">杭州</span>
</div>
</div>
<!--城市选择区区-->
<div class="card">
<a href="javascript:void(0)" class="cancel">取消</a>
<div class="hot-cities">
<header>热门城市</header>
<div class="cities">
<ul>
<li>重庆</li>
<li>广州</li>
<li>深圳</li>
<li>西安</li>
<li>天津</li>
<li>上海</li>
<li>成都</li>
<li>厦门</li>
<li>长沙</li>
<li>杭州</li>
<li>南京</li>
<li>武汉</li>
<li>昆明</li>
<li>大连</li>
<li>北京</li>
<li>青岛</li>
<li>安徽</li>
<li>海南</li>
<li>洛阳</li>
<li>贵州</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/booking.js"></script>
</body>
</html>
booking.css:
body,
div,
ul,
li,
p {
margin: 0;
padding: 0;
}
body {
background-color: rgba(0, 0, 0, .5);
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
width: 500px;
height: 400px;
background-color: #23b8ff;
border-radius: 20px;
overflow: hidden;
}
.main {
width: 500px;
height: 400px;
}
.content {
position: relative;
width: 100%;
height: 60px;
margin-top: 19px;
border-bottom: 1px solid #ccc;
}
.main img {
width: 100%;
height: 270px;
}
.content span {
position: absolute;
display: inline-block;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 20px;
cursor: pointer;
transition: left 0.3s; //过渡动画
}
.before:first-child,
.after:last-child {
left: 50px;
}
.before:last-child,
.after:first-child {
left: 350px;
}
.change {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -10px;
width: 30px;
height: 20px;
background: url("../images/change.png") center no-repeat;
background-size: 100%, 100%;
border-radius: 50%;
transition: transform 0.3s;
cursor: pointer;
z-index: 10;
}
.card {
position: absolute;
top: 0;
left: 100%;
width: 500px;
height: 400px;
background-color: #fff;
border-radius: 20px;
z-index: 100;
}
.card a {
display: block;
margin: 20px 0 0 25px;
text-decoration: none;
color: #ccc;
font-size: 14px;
}
.hot-cities {
width: 100%;
}
header {
text-align: center;
margin: 20px;
font-size: 20px;
}
.cities {
width: 90%;
margin: 0 auto;
}
.hot-cities li {
display: inline-block;
margin: 8px;
list-style: none;
width: 15%;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #ccc;
border-radius: 10px;
cursor: pointer;
}
booking.js:
//获取dom元素
var oChange = document.getElementsByClassName("change")[0],
oSpan = Array.prototype.slice.call(document.getElementsByTagName("span")),
oCancel = document.getElementsByClassName("cancel")[0],
oUl = document.getElementsByTagName("ul")[0],
oCard = document.getElementsByClassName("card")[0],
deg = 0, //设置初始角度
onOff = false, //设置一个开关控制交换
oActive; //获取当前点击元素
//点击交换事件
oChange.onclick = function () {
//通过控制类名交换位置
//forEach(function(){})用来循环数组
//Array.prototype.slice方法将类数组转换为数组
onOff = !onOff;
oSpan.forEach(function (ele, index) {
//ele循环遍历的每个元素,index是索引值
ele.className = onOff ? "after" : "before";
});
deg += 180;
oChange.style.transform = "rotate(" + deg + "deg)";
}
//选项卡功能
//点击城市让卡片出现
oSpan.forEach((ele, index) => {
ele.onclick = () => {
oCard.style.left = "0";
//给被点击元素设置class标记以便后面确定更换城市
ele.classList.add("active");
oActive = document.getElementsByClassName("active")[0];
console.log(oActive)
}
});
oCancel.onclick = () => {
oCard.style.left = "100%";
oActive.classList.remove("active");
}
//点击切换城市应用在li父级绑定事件委托
oUl.addEventListener('click', function (e) {
e = e || window.event;
//获取触发事件的事件源
var target = e.target || e.srcElement;
if (target.nodeName == "LI") {
// console.log(target.innerText);
oCard.style.left = "100%";
oActive.innerText = target.innerText;
oActive.classList.remove("active"); //替换后要清除active类名
}
})
效果图: