Home Esplora Aiuto
Accedi
lovecoding
/
W250913
10
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

admin

fengchuanyu 1 giorno fa
parent
7bcd8eb4d8
commit
8a11e5128f
3 ha cambiato i file con 116 aggiunte e 5 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 26 0
      7_移动端/8_属性选择器.html
  2. 39 0
      7_移动端/9_移动端事件.html
  3. 51 5
      7_移动端/练习3_猫眼电影.html

+ 26 - 0
7_移动端/8_属性选择器.html
Vedi File 

@@ -0,0 +1,26 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /*属性选择器 */
 
+        [data-tab="movie"]{
 
+            color: red;
 
+        }
 
+        [type="button"]{
 
+            color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li data-tab="movie">热映</li>
 
+        <li data-tab="cinema">影院</li>
 
+        <li data-tab="coming">待映</li>
 
+    </ul>
 
+    <input type="text">
 
+    <input type="button" value="搜索">
 
+</body>
 
+</html>

+ 39 - 0
7_移动端/9_移动端事件.html
Vedi File 

@@ -0,0 +1,39 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: pink;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script>
 
+        var oBox = document.querySelector(".box");
 
+        // 鼠标点击事件
 
+        // 鼠标点击会有一个300毫秒的延迟 
+        oBox.onclick = function(){
 
+            console.log("点击事件");
 
+        }
 
+        // 移动端点击事件
 
+        // 移动端点击事件不会有延迟
 
+        oBox.ontouchstart = function(){
 
+            console.log("移动端点击start事件");
 
+        }
 
+        // 移动端点击事件会有一个
 
+        oBox.ontouchend = function(){
 
+            console.log("移动端点击end事件");
 
+        }
 
+        // touchmove 移动端滑动事件
 
+        oBox.ontouchmove = function(){
 
+            console.log("移动端滑动事件");
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 51 - 5
7_移动端/练习3_猫眼电影.html
Vedi File 

@@ -68,6 +68,7 @@
 
         }
 
         }
 
         nav .nav-btn{
 
         nav .nav-btn{
 
             font-size: .3rem;
 
             font-size: .3rem;
 
+            position: relative;
 
         }
 
         }
 
         nav .nav-btn ul{
 
         nav .nav-btn ul{
 
             display: flex;
 
             display: flex;
 
@@ -76,6 +77,17 @@
 
             width: 11vw;
 
             width: 11vw;
 
             line-height: .8rem;
 
             line-height: .8rem;
 
             text-align: center;
 
             text-align: center;
 
+            color: #666;
 
+        }
 
+        nav .nav-btn .line{
 
+            width: 6vw;
 
+            height: 4px;
 
+            background-color: #e54847;
 
+            position: absolute;
 
+            bottom: 0;
 
+            left: 0;
 
+            border-radius: 1px;
 
+            transition: all .1s linear;
 
         }
 
         }
 
         nav .search{
 
         nav .search{
 
             font-size: .3rem;
 
             font-size: .3rem;
 
@@ -86,7 +98,22 @@
 
         nav .search .iconfont{
 
         nav .search .iconfont{
 
             font-size: .4rem;
 
             font-size: .4rem;
 
             color: #ef4238;
 
             color: #ef4238;
 
-            
+        }
 
+        nav .movie [data-tab="movie"],
 
+        nav .cinema [data-tab="cinema"],
 
+        nav .coming [data-tab="coming"]{
 
+            color: #111;
 
+            font-size: .35rem;
 
+            font-weight: bold;
 
+        }
 
+        nav .movie .line{
 
+            left: 2vw;
 
+        }
 
+        nav .cinema .line{
 
+            left: 13vw;
 
+        }
 
+        nav .coming .line{
 
+            left: 25vw;
 
         }
 
         }
 
         /* 导航部分 end */
 
         /* 导航部分 end */
 
     </style>
 
     </style>
 
@@ -105,11 +132,11 @@
 
                 <span>哈尔滨</span>
 
                 <span>哈尔滨</span>
 
                 <i class="arr-btn"></i>
 
                 <i class="arr-btn"></i>
 
             </div>
 
             </div>
 
-            <div class="nav-btn">
 
+            <div class="nav-btn movie">
 
                 <ul>
 
                 <ul>
 
-                    <li>热映</li>
 
-                    <li>影院</li>
 
-                    <li>待映</li>
 
+                    <li data-tab="movie">热映</li>
 
+                    <li data-tab="cinema">影院</li>
 
+                    <li data-tab="coming">待映</li>
 
                 </ul>
 
                 </ul>
 
                 <div class="line"></div>
 
                 <div class="line"></div>
 
             </div>
 
             </div>
 
@@ -120,5 +147,24 @@
 
     </div>
 
     </div>
 
     <!-- 引入rem.js文件 动态设置html字体大小   -->
 
     <!-- 引入rem.js文件 动态设置html字体大小   -->
 
     <script src="./rem.js"></script>
 
     <script src="./rem.js"></script>
 
+    <script>
 
+        // 获取元素
 
+        var aNavBtn = document.querySelectorAll(".nav-btn li");
 
+        var oNavBtn = document.querySelector(".nav-btn");
 
+        // 为顶部导航添加点击事件
 
+        for(var i=0;i<aNavBtn.length;i++){
 
+            aNavBtn[i].ontouchstart = function(){
 
+                // 获取当前按钮dataset-tab值
 
+                var tab = this.dataset.tab;
 
+                // 切换类名
 
+                // oNavBtn.classList.remove("movie");
 
+                // oNavBtn.classList.remove("cinema");
 
+                // oNavBtn.classList.remove("coming");
 
+                // oNavBtn.classList.add(tab);
 
+                oNavBtn.className ="nav-btn " + tab;
 
+
 
+            }
 
+        }
 
+    </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>