最新公告
  • 欢迎您光临猿码素材,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 正文概述
  • 评价建议
  • QQ2019版登录界面的蓝色背景

    this post

    JS实现代码

    <script type="text/javascript">
    $(function () {
        if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {
            $.getScript("./cav.js",
                    function () {
                        var t = {
                            width: 1.5,
                            height: 1.5,
                            depth: 10,
                            segments: 12,
                            slices: 6,
                            xRange: 0.8,
                            yRange: 0.1,
                            zRange: 1,
                            ambient: "#525252",
                            diffuse: "#FFFFFF",
                            speed: 0.0002
                        };
                        var G = {
                            count: 2,
                            xyScalar: 1,
                            zOffset: 100,
                            ambient: "#002c4a",
                            diffuse: "#005584",
                            speed: 0.001,
                            gravity: 1200,
                            dampening: 0.95,
                            minLimit: 10,
                            maxLimit: null,
                            minDistance: 20,
                            maxDistance: 400,
                            autopilot: false,
                            draw: false,
                            bounds: CAV.Vector3.create(),
                            step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))
                        };
                        var m = "canvas";
                        var E = "svg";
                        var x = {
                            renderer: m
                        };
                        var i, n = Date.now();
                        var L = CAV.Vector3.create();
                        var k = CAV.Vector3.create();
                        var z = document.getElementById("container");
                        var w = document.getElementById("anitOut");
                        var D, I, h, q, y;
                        var g;
                        var r;
    
                        function C() {
                            F();
                            p();
                            s();
                            B();
                            v();
                            K(z.offsetWidth, z.offsetHeight);
                            o()
                        }
    
                        function F() {
                            g = new CAV.CanvasRenderer();
                            H(x.renderer)
                        }
    
                        function H(N) {
                            if (D) {
                                w.removeChild(D.element)
                            }
                            switch (N) {
                                case m:
                                    D = g;
                                    break
                            }
                            D.setSize(z.offsetWidth, z.offsetHeight);
                            w.appendChild(D.element)
                        }
    
                        function p() {
                            I = new CAV.Scene()
                        }
    
                        function s() {
                            I.remove(h);
                            D.clear();
                            q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);
                            y = new CAV.Material(t.ambient, t.diffuse);
                            h = new CAV.Mesh(q, y);
                            I.add(h);
                            var N, O;
                            for (N = q.vertices.length - 1; N >= 0; N--) {
                                O = q.vertices[N];
                                O.anchor = CAV.Vector3.clone(O.position);
                                O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));
                                O.time = Math.randomInRange(0, Math.PIM2)
                            }
                        }
    
                        function B() {
                            var O, N;
                            for (O = I.lights.length - 1; O >= 0; O--) {
                                N = I.lights[O];
                                I.remove(N)
                            }
                            D.clear();
                            for (O = 0; O < G.count; O++) {
                                N = new CAV.Light(G.ambient, G.diffuse);
                                N.ambientHex = N.ambient.format();
                                N.diffuseHex = N.diffuse.format();
                                I.add(N);
                                N.mass = Math.randomInRange(0.5, 1);
                                N.velocity = CAV.Vector3.create();
                                N.acceleration = CAV.Vector3.create();
                                N.force = CAV.Vector3.create()
                            }
                        }
    
                        function K(O, N) {
                            D.setSize(O, N);
                            CAV.Vector3.set(L, D.halfWidth, D.halfHeight);
                            s()
                        }
    
                        function o() {
                            i = Date.now() - n;
                            u();
                            M();
                            requestAnimationFrame(o)
                        }
    
                        function u() {
                            var Q, P, O, R, T, V, U, S = t.depth / 2;
                            CAV.Vector3.copy(G.bounds, L);
                            CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);
                            CAV.Vector3.setZ(k, G.zOffset);
                            for (R = I.lights.length - 1; R >= 0; R--) {
                                T = I.lights[R];
                                CAV.Vector3.setZ(T.position, G.zOffset);
                                var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);
                                var W = G.gravity * T.mass / N;
                                CAV.Vector3.subtractVectors(T.force, k, T.position);
                                CAV.Vector3.normalise(T.force);
                                CAV.Vector3.multiplyScalar(T.force, W);
                                CAV.Vector3.set(T.acceleration);
                                CAV.Vector3.add(T.acceleration, T.force);
                                CAV.Vector3.add(T.velocity, T.acceleration);
                                CAV.Vector3.multiplyScalar(T.velocity, G.dampening);
                                CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);
                                CAV.Vector3.add(T.position, T.velocity)
                            }
                            for (V = q.vertices.length - 1; V >= 0; V--) {
                                U = q.vertices[V];
                                Q = Math.sin(U.time + U.step[0] * i * t.speed);
                                P = Math.cos(U.time + U.step[1] * i * t.speed);
                                O = Math.sin(U.time + U.step[2] * i * t.speed);
                                CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);
                                CAV.Vector3.add(U.position, U.anchor)
                            }
                            q.dirty = true
                        }
    
                        function M() {
                            D.render(I)
                        }
    
                        function J(O) {
                            var Q, N, S = O;
                            var P = function (T) {
                                for (Q = 0, l = I.lights.length; Q < l; Q++) {
                                    N = I.lights[Q];
                                    N.ambient.set(T);
                                    N.ambientHex = N.ambient.format()
                                }
                            };
                            var R = function (T) {
                                for (Q = 0, l = I.lights.length; Q < l; Q++) {
                                    N = I.lights[Q];
                                    N.diffuse.set(T);
                                    N.diffuseHex = N.diffuse.format()
                                }
                            };
                            return {
                                set: function () {
                                    P(S[0]);
                                    R(S[1])
                                }
                            }
                        }
    
                        function v() {
                            window.addEventListener("resize", j)
                        }
    
                        function A(N) {
                            CAV.Vector3.set(k, N.x, D.height - N.y);
                            CAV.Vector3.subtract(k, L)
                        }
    
                        function j(N) {
                            K(z.offsetWidth, z.offsetHeight);
                            M()
                        }
    
                        C();
                    })
        } else {
            alert('调用cav.js失败');
        }
    });
    </script>

     

    其中cav.js为外部依赖文件,点击右侧下载。

     

     

    本站所有资源均由网友共享,仅用于参考学习用,请勿直接商用,如有侵权,请联系网站客服删除相关资源。若由于商用引起版权纠纷,一切责任均由使用者承担。
    猿码素材 » QQ登录蓝色动态背景JS实现

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    猿码素材
    一个高级程序员模板开发平台

    2 评论

    1. Great content! Super high-quality! Keep it up! 🙂

    Leave a Reply

    • 96会员总数(位)
    • 51资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 101稳定运行(天)

    欢迎加入猿码素材,上传源码收益100%归作者所有!

    立即加入 了解详情