Home Explore Help
Sign In
lovecoding
/
VIP22
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

new

zsydgithub 2 years ago
parent
918298d6fc
commit
bb86c340ff
12 changed files with 192 additions and 0 deletions
Unified View Show Diff Stats
  1. 130 0
      8_移动端/8_点透事件.html
  2. 31 0
      8_移动端/练习/font/iconfont.css
  3. BIN
      8_移动端/练习/font/iconfont.ttf
  4. BIN
      8_移动端/练习/font/iconfont.woff
  5. BIN
      8_移动端/练习/font/iconfont.woff2
  6. BIN
      8_移动端/练习/images/.DS_Store
  7. BIN
      8_移动端/练习/images/icon01.png
  8. BIN
      8_移动端/练习/images/img01.png
  9. BIN
      8_移动端/练习/images/img02.png
  10. BIN
      8_移动端/练习/images/img03.jpg
  11. BIN
      8_移动端/练习/images/img04.jpg
  12. 31 0
      8_移动端/练习/rem.js

+ 130 - 0
8_移动端/8_点透事件.html
View File 

@@ -0,0 +1,130 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style type="text/css">
 
+    * {
 
+      touch-action: none
 
+    }
 
+
 
+    body {
 
+      margin: 0;
 
+    }
 
+
 
+    .container {
 
+      width: 100%;
 
+      overflow: hidden;
 
+      position: relative;
 
+    }
 
+
 
+    .layer-title {
 
+      width: 100%;
 
+      margin: 50px 0;
 
+      text-align: center;
 
+    }
 
+
 
+    .layer-action {
 
+      position: absolute;
 
+      bottom: 20px;
 
+      width: 100%;
 
+      text-align: center;
 
+    }
 
+
 
+    .btn {
 
+      background-color: #08c;
 
+      border: 0;
 
+      color: #fff;
 
+      height: 30px;
 
+      line-height: 30px;
 
+      width: 100px;
 
+    }
 
+
 
+    #underLayer {
 
+      background-color: #eee;
 
+      width: 90%;
 
+      height: 500px;
 
+      line-height: 500px;
 
+      margin: 30px auto 1000px;
 
+      text-align: center;
 
+    }
 
+
 
+    #popupLayer {
 
+      /*display: none;*/
 
+      background-color: #fff;
 
+      width: 80%;
 
+      height: 200px;
 
+      position: fixed;
 
+      top: 50%;
 
+      left: 50%;
 
+      margin-left: -40%;
 
+      margin-top: -100px;
 
+      z-index: 1;
 
+    }
 
+
 
+    #bgMask {
 
+      position: fixed;
 
+      top: 0;
 
+      left: 0;
 
+      right: 0;
 
+      bottom: 0;
 
+      background-color: rgba(0, 0, 0, 0.6);
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div class="container">
 
+    <div id="underLayer">底层元素</div>
 
+
 
+    <div id="popupLayer">
 
+      <div class="layer-title">弹出层</div>
 
+      <div class="layer-action">
 
+        <button class="btn" id="closePopup">关闭</button>
 
+      </div>
 
+    </div>
 
+  </div>
 
+  <div id="bgMask"></div>
 
+  <script>
 
+    var oClose = document.querySelector('#closePopup')
 
+    var oUnder = document.querySelector('#underLayer')
 
+    // 点击关闭按钮 遮罩层和框隐藏
 
+    oClose.ontouchstart = function (e) {
 
+
 
+      e.preventDefault();
 
+      // 框隐藏
 
+      document.querySelector('#popupLayer').style.display = 'none'
 
+      // 遮罩层
 
+      document.querySelector('#bgMask').style.display = 'none'
 
+    }
 
+
 
+    //   oClose.onclick = function(){
 
+    //    document.querySelector('#popupLayer').style.display = 'none'
 
+    //    document.querySelector('#bgMask').style.display = 'none'
 
+    // }
 
+
 
+    // 底层元素点击click
 
+    oUnder.onclick = function () {
 
+      alert('click')
 
+    }
 
+    /* 
+    出现点透事件的条件：
 
+      有两层重叠的元素
 
+      上面的元素带有touch事件  下面的元素带有click事件 或者 a
 
+    
+    上层元素点击后 隐藏  但是 touch事件 结束  click事件有一个300ms的延迟 所以当关闭上层遮罩层时
 
+    还有一个click的延迟时间  触发点击事件
 
+
 
+    touchstart->touchmove->touched->click
 
+
 
+    解决方案：
 
+    1.把上面的事件也换成click事件 都有300ms延迟事件 这样就不会立即触发了
 
+    2.把上层元素的事件通过event.preventDefault()取消事件默认行为
 
+    */
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 31 - 0
8_移动端/练习/font/iconfont.css
View File 

@@ -0,0 +1,31 @@
 
+@font-face {
 
+  font-family: "iconfont"; /* Project id 3177944 */
 
+  src: url('iconfont.woff2?t=1644562719502') format('woff2'),
 
+       url('iconfont.woff?t=1644562719502') format('woff'),
 
+       url('iconfont.ttf?t=1644562719502') format('truetype');
 
+}
 
+
 
+.iconfont {
 
+  font-family: "iconfont" !important;
 
+  font-size: 16px;
 
+  font-style: normal;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+.icon-che:before {
 
+  content: "\e6cd";
 
+}
 
+
 
+.icon-tuipiao:before {
 
+  content: "\e8ba";
 
+}
 
+
 
+.icon-weizhi:before {
 
+  content: "\e681";
 
+}
 
+
 
+.icon-xiangxiajiantou:before {
 
+  content: "\e65e";
 
+}
 
+

BIN
8_移动端/练习/font/iconfont.ttf
View File


BIN
8_移动端/练习/font/iconfont.woff
View File


BIN
8_移动端/练习/font/iconfont.woff2
View File


BIN
8_移动端/练习/images/.DS_Store
View File


BIN
8_移动端/练习/images/icon01.png
View File


BIN
8_移动端/练习/images/img01.png
View File


BIN
8_移动端/练习/images/img02.png
View File


BIN
8_移动端/练习/images/img03.jpg
View File


BIN
8_移动端/练习/images/img04.jpg
View File


+ 31 - 0
8_移动端/练习/rem.js
View File 

@@ -0,0 +1,31 @@
 
+;
 
+(function(win) {
 
+    var doc = win.document;
 
+    var docEl = doc.documentElement; 
+    var tid;
 
+
 
+    function refreshRem() {
 
+        // 获取屏幕宽度
 
+       
+        var width = docEl.getBoundingClientRect().width;
 
+        var rem = width / 7.5; // 将屏幕宽度分成6.4份， 1份为1rem   320/6.4 = 50 
+        // 让html的fontSize = 50px   1rem = 50px
 
+        docEl.style.fontSize = rem + 'px'; 
+        // 320  /6.4 = 50   html->50      1rem   50 
+        // 640  /6.4 = 100  html-> 100           100
 
+    }
 
+
 
+    win.addEventListener('resize', function() {
 
+        clearTimeout(tid);
 
+        tid = setTimeout(refreshRem, 10);
 
+    }, false);
 
+    win.addEventListener('pageshow', function(e) {
 
+        if (e.persisted) {
 
+            clearTimeout(tid);
 
+            tid = setTimeout(refreshRem, 10);
 
+        }
 
+    }, false);
 
+
 
+    refreshRem();
 
+
 
+})(window);