鼠标移动特效

Html

Css

.tb960x90 {
	display:none!important;
	display:none
}
body {
	background-color:#232323;
}

function n(e, n) {
        for (var t in n) e.hasOwnProperty(t) || (e[t] = n[t]);
        return e
    }

function t(e) {
        function n(e, n) {
            return function() {
                e.call(n, arguments)
            }
        }
        var t = {};
        for (var o in e) t[o] = "function" == typeof e[o] ? n(e[o], e) : e[o];
        return t
    }

function o(e, n) {
        e.length = 0;
        for (var t = 0, o = n.length; o > t; t++) e[t] = n[t];
        return e
    }

function a() {
        function e(e) {
            return M[e] || String.fromCharCode(e)
        }

function n(e) {
            s.mouse.ox = s.mouse.x, s.mouse.oy = s.mouse.y, s.mouse.x = e.x, s.mouse.y = e.y, s.mouse.dx = s.mouse.x - s.mouse.ox, s.mouse.dy = s.mouse.y - s.mouse.oy
        }

function a(e) {
            var n, o = t(e);
            o.original = e;
            for (var a = s.canvas, u = 0, i = 0; a; a = a.offsetParent) u += a.offsetLeft, i += a.offsetTop;
            if (o.touches && o.touches.length)
                for (var r, c = o.touches.length - 1; c >= 0; c--) r = o.touches[c], r.x = r.pageX - u, r.y = r.pageY - i, n = A[c] || r, r.dx = r.x - n.x, r.dy = r.y - n.x, r.ox = n.x, r.oy = n.y, A[c] = t(r);
            else o.x = o.pageX - u, o.y = o.pageY - i, n = A.mouse || o, o.dx = o.x - n.x, o.dy = o.y - n.y, o.ox = n.x, o.oy = n.y, A.mouse = o;
            return o
        }

function u(e) {
            e.preventDefault(), e = a(e), o(s.touches, e.touches), n(s.touches[0]), s.touchstart && s.touchstart(e), s.mousedown && s.mousedown(e)
        }

function r(e) {
            e = a(e), o(s.touches, e.touches), n(s.touches[0]), s.touchmove && s.touchmove(e), s.mousemove && s.mousemove(e)
        }

function c(e) {
            if (e = a(e), e.touches.length)
                for (var n in A) e.touches[n] || A[n];
            else A = {};
            s.touchend && s.touchend(e), s.mouseup && s.mouseup(e)
        }

function m(e) {
            e = a(e), s.mouseover && s.mouseover(e)
        }

function d(e) {
            e = a(e), s.dragging || (x(s.canvas, "mousemove", h), x(s.canvas, "mouseup", v), y(document, "mousemove", h), y(document, "mouseup", v), s.dragging = !0), o(s.touches, [e]), s.touchstart && s.touchstart(e), s.mousedown && s.mousedown(e)
        }

function h(e) {
            e = a(e), n(e), o(s.touches, [e]), s.touchmove && s.touchmove(e), s.mousemove && s.mousemove(e)
        }

function f(e) {
            e = a(e), s.mouseout && s.mouseout(e)
        }

function v(e) {
            e = a(e), s.dragging && (x(document, "mousemove", h), x(document, "mouseup", v), y(s.canvas, "mousemove", h), y(s.canvas, "mouseup", v), s.dragging = !1), A.mouse, s.touchend && s.touchend(e), s.mouseup && s.mouseup(e)
        }

function w(e) {
            e = a(e), s.click && s.click(e)
        }

function l(n) {
            s.keys[e(n.keyCode)] = !0, s.keys[n.keyCode] = !0, s.keydown && s.keydown(n)
        }

function u() {
        if (!h) {
            var e = Date.now();
            s.dt = e - s.now, s.millis += s.dt, s.now = e, s.update && s.update(s.dt), s.autoclear && s.clear(), s.draw && s.draw(s)
        }
        h = ++h % s.interval, f = requestAnimationFrame(u)
    }

function Particle(x, y, radius) {
    this.init(x, y, radius);
}

Particle.prototype = {

init: function(x, y, radius) {

this.alive = true;

this.radius = radius || 10;
        this.wander = 0.15;
        this.theta = random(TWO_PI);
        this.drag = 0.92;
        this.color = '#fff';

this.x = x || 0.0;
        this.y = y || 0.0;

this.vx = 0.0;
        this.vy = 0.0;
    },

move: function() {

this.x += this.vx;
        this.y += this.vy;

this.vx *= this.drag;
        this.vy *= this.drag;

this.theta += random(-0.5, 0.5) * this.wander;
        this.vx += sin(this.theta) * 0.1;
        this.vy += cos(this.theta) * 0.1;

this.radius *= 0.96;
        this.alive = this.radius > 0.5;
    },

draw: function(ctx) {

ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
        ctx.fillStyle = this.color;
        ctx.fill();
    }
};

// ----------------------------------------
// Example
// ----------------------------------------

var MAX_PARTICLES = 280;
var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423'];

var particles = [];
var pool = [];

var demo = Sketch.create({
    container: document.getElementById('container')
});

demo.setup = function() {

// Set off some initial particles.
    var i, x, y;

for (i = 0; i < 20; i++) {
        x = (demo.width * 0.5) + random(-100, 100);
        y = (demo.height * 0.5) + random(-100, 100);
        demo.spawn(x, y);
    }
};

demo.spawn = function(x, y) {

if (particles.length >= MAX_PARTICLES)
        pool.push(particles.shift());

particle = pool.length ? pool.pop() : new Particle();
    particle.init(x, y, random(5, 40));

particle.wander = random(0.5, 2.0);
    particle.color = random(COLOURS);
    particle.drag = random(0.9, 0.99);

theta = random(TWO_PI);
    force = random(2, 8);

particle.vx = sin(theta) * force;
    particle.vy = cos(theta) * force;

particles.push(particle);
}

demo.update = function() {

var i, particle;

for (i = particles.length - 1; i >= 0; i--) {

particle = particles[i];

if (particle.alive) particle.move();
        else pool.push(particles.splice(i, 1)[0]);
    }
};

demo.draw = function() {

demo.globalCompositeOperation = 'lighter';

for (var i = particles.length - 1; i >= 0; i--) {
        particles[i].draw(demo);
    }
};

demo.mousemove = function() {

var particle, theta, force, touch, max, i, j, n;

for (i = 0, n = demo.touches.length; i < n; i++) {

touch = demo.touches[i], max = random(1, 4);
        for (j = 0; j < max; j++) demo.spawn(touch.x, touch.y);
    }
};

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

鼠标移动特效



代码描述：鼠标跟随动画效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

难得 ??

相关代码

鼠标移动特效

最新