fengchuanyu преди 2 месеца
родител
ревизия
c7703bad68
променени са 3 файла, в които са добавени 135 реда и са изтрити 0 реда
  1. 56 0
      10_移动端/7_移动端事件.html
  2. 26 0
      10_移动端/js/rem.js
  3. 53 0
      10_移动端/练习6_猫眼电影.html

+ 56 - 0
10_移动端/7_移动端事件.html

@@ -0,0 +1,56 @@
+<!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: red;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .box2{
+            width: 200px;
+            height: 200px;
+            background-color: blue;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="box2"></div>
+    <div class="box"></div>
+    
+    <script>
+        let oBox = document.querySelector('.box');
+        let oBox2 = document.querySelector('.box2');
+
+        oBox.addEventListener("touchstart",function(){
+            this.style.display = 'none';
+        })
+        oBox2.addEventListener("click",function(){
+            console.log("click")
+        })
+
+        // oBox.onclick = function(){
+        //     console.log('click');
+        // }
+        // oBox.addEventListener("touchstart",function(){
+        //     console.log('点击');
+        // })
+        // oBox.addEventListener("touchmove",function(){
+        //     console.log('滑动');
+        // })
+        // oBox.addEventListener("touchend",function(){
+        //     console.log('离开');
+        // })
+
+    </script>
+</body>
+</html>

+ 26 - 0
10_移动端/js/rem.js

@@ -0,0 +1,26 @@
+;
+(function(win) {
+    var doc = win.document;
+    var docEl = doc.documentElement;
+    var tid;
+
+    function refreshRem() {
+        var width = docEl.getBoundingClientRect().width;
+        var rem = width / 7.5; // 将屏幕宽度分成7.5份, 1份为1rem
+        docEl.style.fontSize = rem + 'px';
+    }
+    
+    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);

+ 53 - 0
10_移动端/练习6_猫眼电影.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./js/rem.js"></script>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4824002_lqndx9h5b3d.css">
+    <style>
+        body{
+            margin: 0;
+        }
+        .container header{
+            width: 100%;
+            height: 1rem;
+            background-color: #e54847;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+        }
+        .container header span{
+            font-size: .3rem;
+            color: #fff;
+        }
+        .container header i{
+            position: absolute;
+            right: 20px;
+            top:50%;
+            transform: translateY(-50%);
+            color: #fff;
+            font-size: .5rem;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <span>猫眼电影</span>
+            <i class="iconfont icon-ego-menu"></i>
+        </header>
+        <nav></nav>
+        <div class="content">
+            <div class="like-movie"></div>
+            <div class="movie-list"></div>
+        </div>
+        <footer></footer>
+    </div>
+</body>
+
+</html>