WordPress博客代码实现雪花效果

在今年圣诞节时增加节日气氛可以给WordPress的博客添加“雪花效果”的特效是一个不错的选择,上次垃圾站给大家介绍了三款实现WordPress博客flash雪花效果插件,今天垃圾站介绍如何利用代码实现博客的雪花效果

直接将此段代码复制到主题模板的header或者footer文件中,也可以根据自己的喜好添加到其他单页面文件中就可以!

注意:修改网站源码注意提前备份哦!

<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() * 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()
< 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://www.lajiz.cn/images/snow.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("", 40);
</script>

其中:
createSnow(“”, 40); →是改变雪花密度参数
this.size = Math.random() * 5 + 5; →是雪花大小参数

PS: 本款雪花代码比较适合深色背景博客使用……

本文由垃圾站编辑整理,转载请保留原文地址:http://www.lajiz.cn/757.html

本文固定链接: http://www.lajiz.cn/757.html | 垃圾站

该文章由 sdujane 于2012年12月18日发表在 资源分享 分类下, 访客可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客!
原创文章,转载请注明: WordPress博客代码实现雪花效果 | 垃圾站
关键字: ,

WordPress博客代码实现雪花效果:目前有44 条留言

  1. 16楼
    Chingwp:

    流量会变无意义的消耗。。

    2012-12-28 下午 8:21 [回复]
    • 就放几天,也消耗不了多少!

      2012-12-28 下午 8:42 [回复]
  2. 15楼
    酷特尔:

    贵站似乎没有使用任何缓存插件。怎么感觉每次查询都这么慢,我是用Google浏览器访问的。有时候访问还出错哦。

    2012-12-28 下午 3:50 [回复]
    • 网站空间不好,准备搬到万网,备案估计月底或者1月初就应该能下来,现在电信通的空间很垃圾……

      2012-12-28 下午 4:01 [回复]
      • 嗯。快多了呢。哈哈。不错不错。不过好像挺贵的吧。?

        2012-12-28 下午 6:00 [回复]
        • 悲剧了,所有中文命名的图片全部无法显示,只好一张张的上传替换了……

          2012-12-28 下午 8:41 [回复]
  3. 14楼
    xiaomingtt:

    我是来给你挑错别字的。第二段“也可以更具自己的喜好”没看懂。

    2012-12-24 下午 12:28 [回复]
  4. 13楼
    花七七:

    学习了

    2012-12-23 上午 10:51 [回复]
  5. 12楼
    冠宇:

    哈哈,和我用的一样,还是喜欢用代码

    2012-12-20 上午 11:05 [回复]
    • 要是代码简单我也喜欢用代码……

      2012-12-20 上午 11:13 [回复]
      • 保存成一个snow.php文件,想什么时候用就什么时候用,雪花颜色的问题,你可以修改snow.gif啊

        2012-12-20 下午 12:26 [回复]
        • 是的,雪花图片可以随便修改的……

          2012-12-20 下午 12:31 [回复]
  6. 11楼
    飘零:

    此功能最近很火啊

    2012-12-19 下午 7:09 [回复]
    • 是啊,快过圣诞节了,博客弄个雪花效果很不错,代码插件都可以实现!

      2012-12-19 下午 9:49 [回复]
  7. 10楼
    唐浚恒:

    折腾啊,呵呵

    2012-12-19 下午 4:04 [回复]
  8. 9楼
    Musk:

    懒得弄

    2012-12-19 下午 1:18 [回复]
    • 也不麻烦,复制粘贴就好了……

      2012-12-19 下午 6:01 [回复]
  9. 8楼
    南寻:

    最近都流行这个嘛,我那主题偏白,看不清…

    2012-12-19 下午 12:42 [回复]
    • 如果更换图片,把雪花换成有色彩的,应该也会有效果

      2012-12-19 下午 12:57 [回复]
  10. 7楼
    voncing:

    试试看~~

    2012-12-18 下午 10:51 [回复]
    • 直接拷贝到主题文件里就可以……

      2012-12-18 下午 10:52 [回复]
  11. 6楼
    花生米:

    这次上代码了 真是折腾有瘾啊 哈哈~

    2012-12-18 下午 10:32 [回复]
    • 直接复制到header或者footer文件里就行,很简单的……

      2012-12-18 下午 10:33 [回复]
  12. 5楼
    回头草:

    黑色主题弄这个比较好

    2012-12-18 下午 10:04 [回复]
  13. 今天上海飘雪了,我现在就去加上这段代码。

    2012-12-18 下午 8:55 [回复]
    • 威海几乎天天飘雪外加360°无缝立体式环绕风……你的博客黑色背景很适合!

      2012-12-18 下午 8:58 [回复]
      • 我记得在还有一种飘雪的代码,雪花可以在某个地方堆起来的,很有感觉的,你找找看。

        2012-12-18 下午 9:07 [回复]
        • 有的,网上挺多代码的,也可以用插件实现雪花堆积效果……

          2012-12-18 下午 10:49 [回复]
  14. 地板
    个人博客:

    顶顶更健康。。

    2012-12-18 下午 8:19 [回复]
  15. 板凳
    乌帮图:

    估计IE9以下无效果。

    2012-12-18 下午 3:33 [回复]
    • 我的是IE9,测试有效果……其他版本没有试过

      2012-12-18 下午 5:32 [回复]
  16. 沙发
    Tomienn:

    此事必有蹊跷。

    2012-12-18 下午 2:29 [回复]

发表评论

快捷键:Ctrl+Enter