網上訂票系統
阿新 • • 發佈：2018-11-08
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類名 } })
效果圖：
