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

dom

e 1 year ago
parent
26e1d5498f
commit
f4290fc485
5 changed files with 82 additions and 0 deletions
Split View Show Diff Stats
  1. 82 0
      js/DOM/21.下落的树叶.html
  2. BIN
      js/DOM/img/1.png
  3. BIN
      js/DOM/img/2.png
  4. BIN
      js/DOM/img/3.png
  5. BIN
      js/DOM/img/4.png

+ 82 - 0
js/DOM/21.下落的树叶.html
View File 

@@ -0,0 +1,82 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <style>
 
+        img {
 
+            position: absolute;
 
+            
+        }
 
+    </style>
 
+    <script>
 
+        // scrollTop scrollLeft
 
+        // 1.获取屏幕可视宽高
 
+        var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
 
+        var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
 
+        console.log(screenWidth,screenHeight)
 
+        // 2.构造函数属性
 
+        function Leaf() {
 
+            // 定义图片宽度
 
+            this.width = Math.round(Math.random() * 100 + 100);
 
+            // 图片距离顶部位置
 
+            this.tops = 0;
 
+            // 图片距离左侧位置
 
+            this.newLeft = Math.random() * (screenWidth - this.width);
 
+            // 图片引入 ./img/3.png
 
+            // Math.random()* y-x + x
 
+            // Math.round(Math.random() * 3 + 1)
 
+            this.newImg = "./img/" + Math.floor(Math.random() * 4 + 1) + '.png'
 
+        }
 
+        // new Leaf();
 
+        Leaf.prototype.init = function() {
 
+            // 创建图片标签
 
+            var imgs = document.createElement("img");
 
+            // 图片路径
 
+            imgs.src = this.newImg;
 
+            // 图片距离顶部位置
 
+            imgs.style.top =  this.tops + "px";
 
+            // 图片距离左侧位置
 
+            imgs.style.left = this.newLeft + "px";
 
+            // 图片宽度 
+            imgs.style.width = this.width + "px";
 
+            this.img = imgs;
 
+            // console.log(this.img)
 
+            document.body.appendChild(imgs);
 
+        }
 
+
 
+        //页面渲染树叶
 
+        var newArr = [];
 
+        for(var i = 0; i <20;i++) {
 
+           var newLeaf = new Leaf();
 
+           newLeaf.init();
 
+           newArr.push(newLeaf);
 
+        } 
+
 
+        // 树叶下落
 
+        // 箭头函数
 
+        // 没有this指向  this当前项
 
+        Leaf.prototype.fail = function() {
 
+            setTimeout(function(){
 
+                var timer = setInterval(function(){
 
+                    if(this.img.offsetTop < screenHeight - this.img.offsetHeight){
 
+                        this.img.style.top = this.img.offsetTop + 10 + 'px';
 
+                    } else {
 
+                        clearInterval(timer)
 
+                    }
 
+                }.bind(this),30);
 
+            }.bind(this),Math.random()*3000)
 
+        }
 
+
 
+        // 点击图片树叶下落
 
+        document.onclick = function() {
 
+            for(var i=0;i<newArr.length;i++) {
 
+                newArr[i].fail();
 
+            }
 
+        }
 
+    </script>
 
+</body>
 
+</html>

BIN
js/DOM/img/1.png
View File


BIN
js/DOM/img/2.png
View File


BIN
js/DOM/img/3.png
View File


BIN
js/DOM/img/4.png
View File