|
|
@@ -0,0 +1,74 @@
|
|
|
+<!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;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <script>
|
|
|
+ var screenWidth =
|
|
|
+ document.documentElement.clientWidth || document.body.clientWidth;
|
|
|
+ var screenHeight =
|
|
|
+ document.documentElement.clientHeight || document.body.clientHeight;
|
|
|
+ function Leaf() {
|
|
|
+ // 图片的宽度
|
|
|
+ this.width1 = Math.random() * 100 + 100;
|
|
|
+ // 距离顶部的位置
|
|
|
+ this.top1 = 0;
|
|
|
+ // 距离左侧的位置
|
|
|
+ this.left1 = Math.random() * (screenWidth - this.width1);
|
|
|
+ // 图片的路径
|
|
|
+ this.img1 = "./img/" + Math.floor(Math.random() * 4 + 1) + ".png";
|
|
|
+ }
|
|
|
+ Leaf.prototype.init = function () {
|
|
|
+ var imgs = document.createElement("img");
|
|
|
+ imgs.style.width = this.width1 + "px";
|
|
|
+ imgs.src = this.img1;
|
|
|
+ imgs.style.left = this.left1 + "px";
|
|
|
+ imgs.style.top = this.top + "px";
|
|
|
+ this.myImg = imgs;
|
|
|
+ document.body.appendChild(imgs);
|
|
|
+ };
|
|
|
+ var failList = []
|
|
|
+ for (var i = 0; i < 20; i++) {
|
|
|
+ var newLeaf = new Leaf();
|
|
|
+ failList.push(newLeaf)
|
|
|
+ newLeaf.init();
|
|
|
+ }
|
|
|
+
|
|
|
+ Leaf.prototype.fail = function () {
|
|
|
+ // console
|
|
|
+ setTimeout(
|
|
|
+ function () {
|
|
|
+ var timer = setInterval(
|
|
|
+ function () {
|
|
|
+ if (
|
|
|
+ this.myImg.offsetTop <
|
|
|
+ screenHeight - this.myImg.offsetHeight
|
|
|
+ ) {
|
|
|
+ this.myImg.style.top = this.myImg.offsetTop + 10 + "px";
|
|
|
+ } else {
|
|
|
+ clearInterval(timer);
|
|
|
+ }
|
|
|
+ }.bind(this),
|
|
|
+ 20
|
|
|
+ );
|
|
|
+ }.bind(this),
|
|
|
+ Math.random()*3000
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ document.onclick = function () {
|
|
|
+ for(var i=0;i<failList.length;i++) {
|
|
|
+ failList[i].fail()
|
|
|
+ }
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e