博客下雪了–如何让博客实现飘雪效果

昨天下午把博客更新到3.5后也发现了一个问题,就是归档伸展效果失效,自己无法解决,不得已最后利用WP-EasyArchives实现。逛别人博客的时候发现,有一些博客页面有一个飘雪效果,看起来不错。想着在自己博客上也要弄一个。

说到做到,俗话说,百度一下,你就知道。百度了一下,果然资料不少。我看了一下,大致有两种方法可行:

一、利用js代码实现

飘雪js

在网上找了几行代码,自己修改了一下,效果差强人意,还算过得去,js代码如下:

<script type=”text/javascript” language=”javascript”>
(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() * 30 + 20;
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()
< 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);
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 + “http://img170.poco.cn/mypoco/myphoto/20121214/23/664123622012121423080207.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.minAngle || 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
}
}
})();
createSnow(“”, 10);
</script>

—————————————————————————————————–

注意:

(“src”, b + “http://xxx”);雪花图片的路径,最好是gif的图片

this.size = Math.random() * 30 + 20;更改数值可以实现雪花尺寸的最大值和最小值

createSnow(“”, 10);更改里面的数值,可以改变屏幕上出现雪花的数量

把代码放在当前主题文件目录下的header.php或者footer.php里面就行了,或者创建一个js文件,在footer.php或header.php中调用。

代码可以直接用,雪花图片是自己做的。最好是把图片下载后放在自己博客上,否则我把图片删掉后,造成影响。

二、利用wordpress插件实现

可以利用WP Falling SnowXmas Snow等插件实现。在后台插件面板搜一下snow,你会找到合适的飘雪插件,不再赘述。

WP Falling Snow 设置:

snow插件设置

如果心动的话,就去试试看吧。

24 Comments

  1. 鬼娃娃

    好花啊

    Reply

  2. skylong

    应该是会拖慢速度的吧

    Reply

    • 一念花开

      拖慢速度到不会很明显,因为我把他放在页面的最底部,所以最后加载。不过会增加电脑开销

      Reply

  3. 飛天鼠

    不太喜歡下雪效果= =

    Reply

  4. 小王

    呵呵,支持一下!

    Reply

  5. 阿信

    这个感觉有点花~~也许的审美不行。不过博主的技术不错的

    Reply

  6. 老妖互联网博客

    这个,影响载入速度啊

    Reply

  7. 我要发芽

    效果很好,就是加载有点慢,也占内存

    Reply

  8. olings

    效果不错,有冬的感觉!

    Reply

  9. 耕博

    你的背景颜色有点浅,雪花看的不明显

    http://www.xgyeye.com/wish/christmas 看我的雪花 ,哈哈

    Reply

  10. 大发

    认真的雪

    Reply

  11. 般若波罗蜜豆

    很有圣诞气氛

    Reply

  12. 南京网站建设

    说的很有道理。路过看看顺便留个爪

    Reply

  13. 朵未

    不错啊~~你的主题陪上雪花很有圣诞的感觉。

    Reply

  14. 小王

    过来支持一下博主! 😉

    Reply

  15. 西门

    中间的那个快速返回顶部的,干嘛搞个白色底? 😳

    Reply

  16. 静水流深

    为什么我把代码复制到foot.php后没看到效果啊!求教~

    Reply

    • 一念花开

      会不会是标点的问题呢?如果还不行,要不单独建一个html文件把代码复制进去试试,可以了再复制到foot.php里面去

      Reply

  17. 静水流深

    您可能还会对这些文章感兴趣!
    里面的文章有重复的,这个问题如何解决??你看看我的网站~

    Reply

  18. arhxiaz

    我不会弄 🙁

    Reply

Leave a Reply

*