Главная Обзор Помощь
Вход
lovecoding
/
W0407
10
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

移动端

zheng 3 дней назад
Родитель
a5c696f54e
Сommit
1a59e0b2f7
3 измененных файлов с 164 добавлено и 0 удалено
Единый вид Показать статистику Diff
  1. 17 0
      移动端/5.媒体查询.html
  2. 43 0
      移动端/7.移动端事件.html
  3. 104 0
      移动端/8.点透事件.html

+ 17 - 0
移动端/5.媒体查询.html
Просмотреть файл 

@@ -22,6 +22,23 @@
 
             }
 
             }
 
         }
 
         }
 
     </style>
 
     </style>
 
+
 
+    <!-- 
+        //注意:中间必须有空格(and来连接多个条件的运行语句,only表示仅有条件,通过被忽略,not表示非/除了某个尺寸)
 
+         用 @media 开头 注意@符号
 
+         mediaType 媒体类型
 
+         关键字 and not only
 
+         media feature 媒体特性 必须有小括号包含
 
+
 
+          媒体类型
 
+            all 所有设备
 
+            screen 显示器 包括pc 手机端 移动端
 
+        样式引入
 
+        <link rel="stylesheet" media="screen and (min-width:375px)" href="./style.css"/>
 
+
 
+        <link rel="stylesheet" media="screen and (min-width:680px)" href="./style1.css"/>
 
+
 
+     -->
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
     <div id="box"></div>
 
     <div id="box"></div>

+ 43 - 0
移动端/7.移动端事件.html
Просмотреть файл 

@@ -0,0 +1,43 @@
 
+<!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: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+        }
 
+        
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+
 
+    <!-- 
+        touchstart：手指触摸到一个 DOM 元素时触发。
 
+        touchmove：手指在一个 DOM 元素上滑动时触发。
 
+        touchend：手指从一个 DOM 元素上移开时触发。
 
+        每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）
 
+        touches：当前位于屏幕上的所有手指的列表。
 
+        targetTouches：位于当前DOM元素上手指的列表。
 
+        changedTouches：涉及当前事件手指的列表  
+        click会有200-300ms延迟
 
+     -->
 
+    <script>
 
+        
+        let box = document.getElementById("box");
 
+        box.ontouchstart = function(event) {
 
+            console.log('开始',event)
 
+        }
 
+        box.ontouchmove = function(event) {
 
+            console.log('移动',event)
 
+        }
 
+        box.ontouchend = function(event) {
 
+            console.log('离开',event)
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 104 - 0
移动端/8.点透事件.html
Просмотреть файл 

@@ -0,0 +1,104 @@
 
+<!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>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 100vw;
 
+            position: relative;
 
+        }
 
+        #under {
 
+            width: 90%;
 
+            height: 520px;
 
+            color: #fff;
 
+            font-size: 28px;
 
+            text-align: center;
 
+            line-height: 520px;
 
+            background: #ccc;
 
+            margin: 0 auto;
 
+        }
 
+        #dialog {
 
+            width: 80%;
 
+            height: 300px;
 
+            background: #fff;
 
+            position: absolute;
 
+            top: 20%;
 
+            left: 40px;
 
+            z-index: 99;
 
+        }
 
+        #title {
 
+            font-size: 20px;
 
+            width: 100%;
 
+            height: 200px;
 
+            text-align: center;
 
+            line-height: 200px;
 
+        }
 
+        #btn {
 
+            width: 100%;
 
+            height: 100px;
 
+        }
 
+        #close {
 
+            width: 100px;
 
+            height: 40px;
 
+            text-align: center;
 
+            line-height: 40px;
 
+            color: #fff;
 
+            background: #00f;
 
+            margin: 0 auto;
 
+        }
 
+        #mask {
 
+            width: 100%;
 
+            height: 100vh;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            background:rgba(0,0,0,.3)
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="under">底层元素</div>
 
+        <div id="dialog">
 
+            <div id="title">弹出层</div>
 
+            <div id="btn">
 
+                <div id="close">关闭</div>
 
+            </div>
 
+        </div>
 
+        <div id="mask"></div>
 
+    </div>
 
+    <script>
 
+
 
+        /**
 
+         * 点透事件
 
+         * 1.两层元素叠加到一起
 
+         * 2.第一层是touch事件
 
+         * 3.第二层是click事件或者a标签
 
+         * 
+         * 
+         * 解决方案：
 
+         * 1.event.preventDefault()
 
+         * 2.将click事件全部换成touch
 
+         * */
 
+        let close = document.getElementById("close");
 
+        let under = document.getElementById("under");
 
+        close.ontouchstart = function(event) {
 
+            event.preventDefault();
 
+            document.getElementById("dialog").style.display = 'none';
 
+            document.getElementById("mask").style.display = 'none';
 
+        }
 
+        under.onclick = function() {
 
+            alert("弹出")
 
+        }
 
+    </script>
 
+</body>
 
+</html>