jquery鼠标跟随特效

特效网页:

http://www.jq22.com/code846

--------------------------------------------------------------------------------------------------------------------------------------

html:

<canvas id="c"></canvas>

------------------------------------------------------------------------------------------------------------------------------------------

css:

    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
        position: relative;
        width: 100%;
    }

    body {
        background: #eee;
    }

    canvas {
        background: white;
        display: block;
    }

    #c {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }

-------------------------------------------------------------------------------------------------------

js:

;(function(main) {
        var args = {};
        main(args);
    })(function(args) {

        'use strict';

        var c = document.getElementById('c');
        var ctx = c.getContext('2d');

        c.width = window.innerWidth;
        c.height = window.innerHeight;

        var mouse = {
            isMoveForFirst: false,
            x: 0,
            y: 0,
            ox: 0,
            oy: 0,
            tx: c.width / 2,
            ty: c.height / 2
        };        

        var Box = function(x, y, w, h) {
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
            this.a = Math.random() * Math.PI * 2;
            this.s = 1;
            this.v = 0;
            this.o = 1;
        };

        Box.prototype = {
            constructor: Box,
            update: function() {

                this.o -= 0.01;
                this.v += 0.1;
                this.a += Math.random() * 0.8 - 0.4;
                this.x += Math.cos(this.a) * this.v;
                this.y += Math.sin(this.a) * this.v;

                this.v = Math.min(10, this.v);
                this.o = Math.max(0, this.o);

            },
            reset: function() {
                this.a = Math.random() * Math.PI * 2;
                this.v = 0;
                this.o = 1;
            },
            render: function(ctx) {
                ctx.save();
                ctx.globalAlpha = this.o;
                ctx.fillStyle = 'white';
                ctx.translate(this.x, this.y);
                ctx.rotate(this.a);
                ctx.scale(this.s, this.s);
                ctx.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
                ctx.restore();
            }
        };

        var box = null;
        var boxList = [];
        var maxBox = 200;
        var index = -1;

        c.addEventListener('mousemove', function(e) {
            var rect = c.getBoundingClientRect();
            mouse.isMoveForFirst = true;
            mouse.x = e.clientX - rect.left;
            mouse.y = e.clientY - rect.top;
        });

        requestAnimationFrame(function loop() {

            requestAnimationFrame(loop);

            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
            ctx.fillRect(0, 0, c.width, c.height);

            if(!mouse.isMoveForFirst) {

                var dx = mouse.tx - mouse.x;
                var dy = mouse.ty - mouse.y;
                var d = Math.sqrt(dx * dx + dy * dy);

                mouse.x += dx * 0.1;
                mouse.y += dy * 0.1;                

                if(d < 0.98) {
                    mouse.x = mouse.tx;
                    mouse.y = mouse.ty;
                }

            }

            if(mouse.x !== mouse.ox && mouse.y !== mouse.oy) {
                if(boxList.length < maxBox) {
                    box = new Box(mouse.x, mouse.y, 10, 3);
                    boxList.push(box);                    
                } else {
                    index = (index + 1) %  boxList.length;
                    box = boxList[index];
                    box.reset();
                    box.x = mouse.x;
                    box.y = mouse.y;
                }
            }

            for(var i = 0; i < boxList.length; i++) {
                box = boxList[i];
                box.update();
                box.render(ctx);
            }

            mouse.ox = mouse.x;
            mouse.oy = mouse.y;                

        });

    });