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

admin

fengchuanyu 2 months ago
parent
7a9a9e78d9
commit
c7703bad68
3 changed files with 135 additions and 0 deletions
Unified View Show Diff Stats
  1. 56 0
      10_移动端/7_移动端事件.html
  2. 26 0
      10_移动端/js/rem.js
  3. 53 0
      10_移动端/练习6_猫眼电影.html

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

@@ -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
View File 

@@ -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
View File 

@@ -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>