javascript雪花效果 注释版
1 (function () { 2 // 添加事件监听器 3 function addEvent(a, b, c) { 4 if (a.addEventListener) a.addEventListener(b, c, false); 5 else a.attachEvent && a.attachEvent("on" + b, c) 6 } 7 // 向window.onload添加执行函数 8 function addToOnLoad(a) { 9 if (typeof window.onload != "function") window.onload = a; 10 else { 11 var b = window.onload; 12 window.onload = function () { 13 b(); 14 a() 15 } 16 } 17 } 18 // scroll top ,left 19 function getScrollDis() { 20 var scroll = {}; 21 for (var type in { 22 Top: "", 23 Left: "" 24 }) { 25 var b = type == "Top" ? "Y" : "X"; 26 if (typeof window["page" + b + "Offset"] != "undefined") scroll[type.toLowerCase()] = window["page" + b + "Offset"]; 27 else { 28 // <html> 29 b = document.documentElement.clientHeight ? document.documentElement : document.body; 30 scroll[type.toLowerCase()] = b["scroll" + type] 31 } 32 } 33 return scroll; 34 } 35 36 // 获取浏览器窗口高度(不包括工具栏/滚动条) 37 function getWinHeight() { 38 39 var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 40 return height; 41 } 42 43 //构造函数 ,模拟雪花类 44 function SnowDot(a) { 45 this.parent = document.body; 46 this.createEl(this.parent, a); 47 this.size = Math.random() * 5 + 5; // 随机设置雪花的大小 48 this.el.style.width = Math.round(this.size) + "px"; 49 this.el.style.height = Math.round(this.size) + "px"; 50 this.maxLeft = document.body.offsetWidth - this.size; 51 this.maxTop = document.body.offsetHeight - this.size; 52 this.left = Math.random() * this.maxLeft; 53 this.top = getScrollDis().top + 1; 54 this.angle = 1.4 + 0.2 * Math.random(); 55 // PI/2 =1.57 56 this.minAngle = 1.4; 57 this.maxAngle = 1.6; 58 // 角度增量 59 this.angleDelta = 0.01 * Math.random(); 60 this.speed = 2 + Math.random() 61 } 62 // 原型 对象实例所共享 63 SnowDot.prototype = { 64 createEl: function (a, b) { 65 this.el = document.createElement("img"); 66 this.el.setAttribute("src", b + "snow" + Math.floor(Math.random() * 4) + ".gif"); 67 this.el.style.position = "absolute"; 68 this.el.style.display = "block"; 69 this.el.style.zIndex = "99999"; 70 this.parent.appendChild(this.el) 71 }, 72 move: function () { 73 if (this.angle < this.minAngle || this.angle > this.maxAngle) this.angleDelta = -this.angleDelta; 74 this.angle += this.angleDelta; 75 // 利用正弦波 余弦波(注意波形图在 pi/2 附近的取值) 76 this.left += this.speed * Math.cos(this.angle * Math.PI); 77 this.top -= this.speed * Math.sin(this.angle * Math.PI); 78 if (this.left < 0) this.left = this.maxLeft; 79 else if (this.left > this.maxLeft) this.left = 0 80 }, 81 draw: function () { 82 this.el.style.top = Math.round(this.top) + "px"; 83 this.el.style.left = Math.round(this.left) + "px" 84 }, 85 remove: function () { 86 this.parent.removeChild(this.el); 87 this.parent = this.el = null 88 } 89 } 90 91 var j = false; 92 addToOnLoad(function () { 93 j = true 94 }); 95 96 //开启/关闭 标志 97 var f = true; 98 99 // a : 雪花gif图片所在路径 100 // b : 雪花最大数目 101 window.createSnow = function (a, b) { 102 if (j) { 103 var c = [], 104 m = setInterval(function () { 105 // &&前的为false则后边的语句不再执行 106 f && b > c.length && Math.random() < b * 0.0025 && c.push(new SnowDot(a)); 107 !f && !c.length && clearInterval(m); 108 for (var e = getScrollDis().top, n = getWinHeight(), d = c.length - 1; d >= 0; d--) { 109 if (c[d]) { 110 // 雪花超出指定高度 111 if (c[d].top > 700 || c[d].top + c[d].size + 1 > e + n) { 112 c[d].remove(); 113 c[d] = null; 114 c.splice(d, 1) //移除数组索引d位置开始1个元素 115 //alert(c[d].top) 116 } else { 117 c[d].move(); 118 c[d].draw() 119 } 120 } 121 } 122 }, 123 40); 124 // 窗口滚动时 雪花移动相应的距离 125 addEvent(window, "scroll", 126 function () { 127 for (var e = c.length - 1; e >= 0; e--) c[e].draw() 128 }) 129 } else addToOnLoad(function () { 130 createSnow(a, b) 131 }) 132 }; 133 window.removeSnow = function () { 134 f = false 135 }; 136 137 })();
源代码:snow.zip 页面内容节选自 阿狸-梦之城堡
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。