|
|
@@ -0,0 +1,75 @@
|
|
|
+<!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>
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ /* top: 10px;
|
|
|
+ left: 100px;
|
|
|
+ width: 300px; */
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <!-- <img src="./img/1.png" alt=""> -->
|
|
|
+ <script>
|
|
|
+
|
|
|
+ var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
|
|
|
+ var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
|
|
|
+ // 树叶的位置（top left width）
|
|
|
+ // 树叶的属性
|
|
|
+ function Leaf() {
|
|
|
+ // 构造函数 this指向当前实例
|
|
|
+ this.width = Math.round(Math.random() * 100 + 100);
|
|
|
+ this.top = 0;
|
|
|
+ this.left = Math.random() * (screenWidth - this.width);
|
|
|
+ this.newUrl = './img/' + Math.floor(Math.random() * 4 + 1) + '.png'
|
|
|
+ }
|
|
|
+ // 绘制树叶
|
|
|
+ Leaf.prototype.init = function () {
|
|
|
+ var imgs = document.createElement("img");
|
|
|
+ imgs.src = this.newUrl;
|
|
|
+ imgs.style.width = this.width + "px";
|
|
|
+ imgs.style.top = this.top + "px";
|
|
|
+ imgs.style.left = this.left + "px";
|
|
|
+ document.body.appendChild(imgs);
|
|
|
+ this.newImg = imgs;
|
|
|
+ }
|
|
|
+ // 绘制多片树叶
|
|
|
+ let newArr = [];
|
|
|
+ for (var i = 0; i < 20; i++) {
|
|
|
+ var leaf = new Leaf();
|
|
|
+ newArr.push(leaf);
|
|
|
+ leaf.init();
|
|
|
+ }
|
|
|
+ // 树叶落下
|
|
|
+ Leaf.prototype.fall = function () {
|
|
|
+ console.log(this)
|
|
|
+ setTimeout(function () {
|
|
|
+ console.log(this)
|
|
|
+ var timer = setInterval(function () {
|
|
|
+ // 当前元素距离顶部的大小 小于 屏幕高度-元素自身高度
|
|
|
+ if (this.newImg.offsetTop < screenHeight - this.newImg.offsetHeight) {
|
|
|
+ this.newImg.style.top = this.newImg.offsetTop + 10 + "px";
|
|
|
+ } else {
|
|
|
+ clearInterval(timer);
|
|
|
+ }
|
|
|
+ }.bind(this), 20)
|
|
|
+ }.bind(this), Math.random() * 2000);
|
|
|
+
|
|
|
+ }
|
|
|
+ // 点击页面 让树叶落下
|
|
|
+ document.onclick = function () {
|
|
|
+ for (var i = 0; i < newArr.length; i++) {
|
|
|
+ newArr[i].fall();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
zheng