雪花飘落效果源码共享

好长一段时间没有更新文章了，主要缘由是最近忙于春节没怎样折腾网站确实不晓得更新些什么了，心想着再不更新博客就要长草了。俗语说的好“车到山前必有路”，既然最近不断在忙于春节，那么共享一篇与春节这个节日相关的文章想来应该是极好的，考虑了半响抉择收拾共享下“雪花飘落作用”的源码比较好，遂有了这篇文章，通过多方比较，觉的雅兮网的这段源码不管从布置难易度还是从代码精约性来看都是很不错的，我本人也运用上了这段代码为博客衬托下节日气氛。代码局部有些纤细改动以进一步简化我们布置的艰难，下面将具体布置方法共享一下。

雪花图片

在网站根目录下新建一个名为 snow 的文件夹，将雪花图片文件别离命名为 snow0.gif、 snow1.gif、 snow2.gif、 snow3.gif ，然后丢在该文件夹下。

#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 25%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

JS 代码

将以下代码保管为 snow.js 文件并丢在上面新建的 snow 文件中即可。

/* 网页雪花飘落特效 */
(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() * 10 + 15; //设置雪花的大小，目前雪花尺度为10~25px
 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].top  e + 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/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  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
 }
 }
})();
createSnow(\"\", 40);