|
|
@@ -0,0 +1,57 @@
|
|
|
+// 获取屏幕宽高
|
|
|
+var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
|
|
+var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
|
|
+
|
|
|
+
|
|
|
+// 构造函数写属性
|
|
|
+function leaf() {
|
|
|
+ // 图片的宽度
|
|
|
+ this.width = Math.random() * 100 + 100;
|
|
|
+ // 图片距离左侧的距离
|
|
|
+ this.newLeft = Math.random() * (screenWidth - this.width);
|
|
|
+ // 距离顶部位置
|
|
|
+ this.tops = 0;
|
|
|
+ // 图片路径的展示
|
|
|
+ this.newImg = '../img/' + Math.floor(Math.random() * 4 + 1) + '.png'
|
|
|
+}
|
|
|
+
|
|
|
+// 原型上写方法
|
|
|
+// 树叶初始状态方法
|
|
|
+leaf.prototype.init = function() {
|
|
|
+ // 创建标签
|
|
|
+ var imgs = document.createElement("img");
|
|
|
+ // imgs元素添加路径
|
|
|
+ imgs.src = this.newImg;
|
|
|
+ imgs.style.width = this.width + 'px';
|
|
|
+ imgs.style.left = this.newLeft + 'px';
|
|
|
+ imgs.style.top = this.tops + 'px';
|
|
|
+ this.img = imgs;
|
|
|
+ document.body.appendChild(imgs);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 树叶落下方法
|
|
|
+leaf.prototype.fall = function() {
|
|
|
+ setTimeout(function(){
|
|
|
+ this.timer = setInterval(function(){
|
|
|
+ if(this.img.offsetTop < screenHeight - this.img.offsetHeight) {
|
|
|
+ this.img.style.top = this.img.offsetTop + 10 + 'px';
|
|
|
+ } else {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ }
|
|
|
+ }.bind(this),20)
|
|
|
+ }.bind(this),Math.random()*2000)
|
|
|
+}
|
|
|
+
|
|
|
+var newArr = [];
|
|
|
+for(var i=0; i<30; i++) {
|
|
|
+ var leaf1 = new leaf();
|
|
|
+ newArr.push(leaf1);
|
|
|
+ leaf1.init();
|
|
|
+}
|
|
|
+
|
|
|
+// document.onclick = function() {
|
|
|
+// for(var i=0;i<newArr.length;i++) {
|
|
|
+// newArr[i].fall();
|
|
|
+// }
|
|
|
+// }
|
e