admin

7-移动端/练习4_猫眼电影.html

@@ -40,6 +40,24 @@
             right: 10px;
             top: 0;
         }
+        .top-menu .menu-box{
+            position: absolute;
+            top: 1rem;
+            right: .2rem;
+            width: 110px;
+            background-color: #fff;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            z-index: 10;
+            display: none;
+        }
+        .top-menu .menu-box li{
+            font-size: .3rem;
+            height: 1rem;
+            line-height: 1rem;
+            text-align: center;
+            color: #666;
+            border-bottom: 1px solid #999;
+        }
 
         .fixed-content .top-menu i {
             font-size: 30px;
@@ -92,6 +110,10 @@
             font-weight: 700;
             position: relative;
         }
+        .nav-center .active{
+            color: #111;
+            font-size: .35rem;
+        }
 
         .nav-center .tab-line {
             position: absolute;
@@ -101,6 +123,7 @@
             height: .06rem;
             background-color: #e54847;
             border-radius: 1px;
+            transition: all .1s ease;
         }
 
         .nav-center li {
@@ -157,7 +180,15 @@
                 <header>
                     <span>猫眼电影</span>
                     <div class="top-menu">
-                        <i class="iconfont icon-ego-menu"></i>
+                        <i id="menu-btn" class="iconfont icon-ego-menu"></i>
+                        <div class="menu-box" style="display: none;">
+                            <ul>
+                                <li>首页</li>
+                                <li>榜单</li>
+                                <li>热点</li>
+                                <li>商城</li>
+                            </ul>
+                        </div>
                     </div>
                 </header>
                 <!-- 头部区域 结束 -->
@@ -169,9 +200,9 @@
                     </div>
                     <div class="nav-center">
                         <ul>
-                            <li>热映</li>
-                            <li>影院</li>
-                            <li>待映</li>
+                            <li data-l="0.24" class="active">热映</li>
+                            <li data-l="1.24">影院</li>
+                            <li data-l="2.24">待映</li>
                         </ul>
                         <div class="tab-line"></div>
                     </div>
@@ -207,7 +238,57 @@
     </div>
     <script src="./js/rem.js"></script>
     <script>
+        // 获取元素
+        // 菜单按钮
+        var oMenuBtn = document.querySelector("#menu-btn");
+        // 获取菜单容器
+        var oMenuBox = document.querySelector(".menu-box");
+
+        // 获取顶部导航按钮
+        var aNav = document.querySelectorAll(".nav-center li")
+        // 获取导航底部横线
+        var oTabLine = document.querySelector(".tab-line");
+
+        // 获取底部导航按钮
+        var tabBtn = document.querySelectorAll("footer ul li");
+
+        // 菜单点击事件
+        oMenuBtn.addEventListener("touchstart",function(){
+            // 获取当前菜单显示的状态
+            var menuMode = oMenuBox.style.display;
+            if(menuMode == "none"){
+                oMenuBox.style.display = "block";
+            }else {
+                oMenuBox.style.display = "none";
+            }
+        })
 
+        // 顶部导航点击事件
+        for(var i=0;i<aNav.length;i++){
+            aNav[i].addEventListener("touchstart",function(){
+                // 先移除所有选中状态
+                for(var j=0;j<aNav.length;j++){
+                    aNav[j].classList.remove("active");
+                }
+                // 给当前点击的元素添加选中状态
+                this.classList.add("active");
+
+                // 移动tab-line
+                oTabLine.style.left = this.dataset.l + "rem";
+            })
+        }
+
+        // 底部导航按钮事件
+        for(var i=0;i<tabBtn.length;i++){
+            tabBtn[i].addEventListener("touchstart",function(){
+                // 先移除所有导航按钮的选中状态
+                for(var j=0;j<tabBtn.length;j++){
+                    tabBtn[j].classList.remove("active");
+                }
+                // 给当前点击的元素添加选中状态
+                this.classList.add("active");
+            })
+        }
     </script>
 </body>