js部分
在网页中加入:
(function(){ function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); else a.attachEvent && a.attachEvent("on" + b, c) }//加入监听事件函数 function g(a) { if (typeof window.onload != "function") window.onload = a; else { var b = window.onload; window.onload = function() { b(); a() } } }//页面载入时就能够进行绘制 function h() { var a = {}; for (type in { Top: "", Left: "" }) { var b = type == "Top" ? "Y": "X"; if (typeof window["page" + b + "Offset"] != "undefined") a[type.toLowerCase()] = window["page" + b + "Offset"]; else { b = document.documentElement.clientHeight ? document.documentElement: document.body; a[type.toLowerCase()] = b["scroll" + type] } } return a }//top为向下已经拖动的高度,left为向左已经拖动的宽度 function l() { var a = document.body, b; if (window.innerHeight) b = window.innerHeight; else if (a.parentElement.clientHeight) b = a.parentElement.clientHeight; else if (a && a.clientHeight) b = a.clientHeight; return b }//获取当前屏幕网页宽度 function i(a) { this.parent = document.body; this.createEl(this.parent, a); this.size = Math.random() * 5 + 5; this.el.style.width = Math.round(this.size) + "px"; this.el.style.height = Math.round(this.size) + "px";//img节点大小 this.maxLeft = document.body.offsetWidth - this.size;//左边界 this.maxTop = document.body.offsetHeight - this.size;//下边界 this.left = Math.random() * this.maxLeft;//初始X轴 this.top = h().top + 1;//初始Y轴 this.angle = 1.4 + 0.2 * Math.random();//初始角度 this.minAngle = 1.4;//摆动角度范围1.4pi~1.6pi this.maxAngle = 1.6; this.angleDelta = 0.01 * Math.random();//角度变动 this.speed = 2 + Math.random()//移动速度,2~3不等 } var j = false; g(function() { j = true }); var f = true; window.createSnow = function(a, b) { if (j) { var c = [], m = setInterval(function() { f && b > c.length && Math.random() < b * 0.0025 && c.push(new i(a)); //限定雪花数组大小 ! f && !c.length && clearInterval(m);//条件符合,清除雪花 for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--) if (c[d]) if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) { c[d].remove(); c[d] = null; c.splice(d, 1)//雪花超出底线,删除 } else { c[d].move();//雪花移动 c[d].draw()//雪花绘制 } }, 40);//40ms一跳 k(window, "scroll", function() { for (var e = c.length - 1; e >= 0; e--) c[e].draw() })//监听滚动栏时间,滚动重绘 } else g(function() { createSnow(a, b) }) }; window.removeSnow = function() { f = false };//移除雪花绘制 i.prototype = { createEl: function(a, b) { this.el = document.createElement("img"); //加入img节点 this.el.setAttribute("src", b + "snow" + Math.floor(Math.random() * 4) + ".gif"); //设置雪花图片路径,种类为snow0~3随机 this.el.style.position = "absolute"; //绝对的布局显示 this.el.style.display = "block"; //将雪花定义为块级元素 this.el.style.zIndex = "99999"; //在最前方显示 this.parent.appendChild(this.el) //加入节点 }, move: function() { if (this.angle < this.minAngle || this.angle > this.maxAngle) this.angleDelta = -this.angleDelta;//保证角度在1.4到1.6之间 this.angle += this.angleDelta;//角度变换 this.left += this.speed * Math.cos(this.angle * Math.PI);//x轴位移计算 this.top -= this.speed * Math.sin(this.angle * Math.PI);//Y轴位移计算 if (this.left < 0) this.left = this.maxLeft; //边界判定,雪花过边界重还有一边界穿出 else if (this.left > this.maxLeft) this.left = 0 }, draw: function() { this.el.style.top = Math.round(this.top) + "px";//定义纵轴位置 this.el.style.left = Math.round(this.left) + "px"//定义横轴位置 }, remove: function() { this.parent.removeChild(this.el);//移除雪花元素 this.parent = this.el = null } } })();
在网页中加入:
<script src="jsized.snow.min.js" type="text/javascript"></script> <script> /** * This function takes 2 arguments * First is the path to the directory with snowflake images * Second is the maximum number of snowflakes, please do not * set this number above 60 as it will impact the performance */ createSnow('', 60); </script>
雪花图片已经贴出,右击另存为就可以
源代码下载地址在回复中贴出