如何给网站加上粒子特效

  今天给本博客网披上一层全站背景粒子效果,自认为感觉不错的效果,给全局加上了,主要放入当前模板的footer或header中,也可以JS调用至网站根目录文件夹下。

<script>

    !function() {
        function A(a, b, c) {
            return a.getAttribute(b) || c
        }
        function F(a) {
            return document.getElementsByTagName(a);
        }
        function D() {
            var c = F("script"),
                a = c.length,
                b = c[a - 1];
            return {
                l: a,
                z: A(b, "zIndex", -1),
                o: A(b, "opacity", 0.5),
                c: A(b, "color", "0,0,0"),
                n: A(b, "count", 199)
            }
        }
        function E() {
            x = i.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            B = i.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }
        function M() {
            J.clearRect(0, 0, x, B);
            var c = [I].concat(v);
            var b, d, a, g, e, f;
            v.forEach(function(h) {
                h.x += h.xa,
                    h.y += h.ya,
                    h.xa *= h.x > x || h.x < 0 ? -1 : 1,
                    h.ya *= h.y > B || h.y < 0 ? -1 : 1,
                    J.fillRect(h.x - 0.5, h.y - 0.5, 1, 1);
                for (d = 0; d < c.length; d++) {
                    b = c[d];
                    if (h !== b && null !== b.x && null !== b.y) {
                        g = h.x - b.x;
                        e = h.y - b.y;
                        f = g * g + e * e;
                        f < b.max && (b === I && f >= b.max / 2 && (h.x -= 0.03 * g, h.y -= 0.03 * e), a = (b.max - f) / b.max, J.beginPath(), J.lineWidth = a / 2, J.strokeStyle = "rgba(" + w.c + "," + (a + 0.2) + ")", J.moveTo(h.x, h.y), J.lineTo(b.x, b.y), J.stroke())
                    }
                }
                c.splice(c.indexOf(h), 1);
            }),
                C(M);
        }
        var i = document.createElement("canvas"),
            w = D(),
            L = "c_n" + w.l, //c_n2
            J = i.getContext("2d"),
            x,
            B,
            C = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
                function(a) {
                    window.setTimeout(a, 1000 / 45)
                },
            N = Math.random,
            I = {
                x: null,
                y: null,
                max: 20000
            };
        i.id = L;
        i.style.cssText = "position:fixed;top:0;left:0;z-index:" + w.z + ";opacity:" + w.o;
        F("body")[0].appendChild(i);
        E();
        window.onresize = E;
        window.onmousemove = function(a) {
            a = a || window.event,
                I.x = a.clientX,
                I.y = a.clientY
        };
        window.onmouseout = function() {
            I.x = null,
                I.y = null
        };
        for (var v = [], z = 0; w.n > z; z++) {
            var G = N() * x,
                H = N() * B,
                y = 2 * N() - 1,
                K = 2 * N() - 1;
            v.push({
                x: G,
                y: H,
                xa: y,
                ya: K,
                max: 6000
            });
        }
        setTimeout(function() {
            M()
        }, 100)
    } ();
</script>

  若觉得上序操作比较麻烦,可直接通过本站JS调用至自己网站底部页面</body>前。

[secret key=”bbs.yxnwork.com”]JS调用路径:<script src = ‘https://demo.yxnwork.com/Web Site/JS/lizi.js’></script>[/secret]

原创文章《如何给网站加上粒子特效》,作者:Admin,未经允许不得转载。
转载或复制时,请注明出处:https://www.xuxiaokun.com/1469.html,本文由 Mr.xu 博客网 整理。

发表评论

登录后才能评论
线上沟通

笔者期待与您共勉 · 互赢

有言必答:点击这里给我发消息

商务洽谈:交互沟通 · 共赢互利

邮件:admin@xuxiaokun.com

线上沟通:周一至周五 9:30 - 17:30

其余时间Mail或QQ我,有言必应。

微信关注
微信关注
投递稿件 我要留言
分享本页
返回顶部