”明天就圣诞节了,在这个特别的日子里,给你特别的祝福!愿你在平安夜里开心,快乐!窗外雪花飘,飘飘雪花妩媚笑。笑冰凉的冬天,每天都在祝福你...“苦逼的我平安夜里还在搞代码...,今天逛博客时看到了一款jquery网页下雪的插件,感觉还不错,就分享给大家吧...
首先要引入JQuery库
然后引入jquery.snow.min.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 } 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"; this.maxLeft = document.body.offsetWidth - this.size; this.maxTop = document.body.offsetHeight - this.size; this.left = Math.random() * this.maxLeft; this.top = h().top + 1; this.angle = 1.4 + 0.2 * Math.random(); this.minAngle = 1.4; this.maxAngle = 1.6; this.angleDelta = 0.01 * Math.random(); this.speed = 2 + Math.random() } 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() = 0; d--) if (c[d]) if (c[d].tope + n) { c[d].remove(); c[d] = null; c.splice(d, 1) } else { c[d].move(); c[d].draw() } }, 40); 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"); this.el.setAttribute("src", b + "snow" + Math.floor(Math.random() * 4) + ".gif"); 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.maxAngle) this.angleDelta = -this.angleDelta; this.angle += this.angleDelta; this.left += this.speed * Math.cos(this.angle * Math.PI); this.top -= this.speed * Math.sin(this.angle * Math.PI); 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 } } })();
最后我们调用creteSnow()函数,让网页"下雪“
注意,雪花是图片,要引入图片才有效果,雪花图片如下,每个雪花是一张图片,另存为到本地即可。