超多特效的鼠标跟随效果

PROMULGATOR

路法神谕

山东省

← Css提示的红点

→ Css3实现图片轮播

相关代码

超多特效的鼠标跟随效果

鼠标移动特效

canvas特效粒子跟随鼠标移动效果

js元素跟随鼠标移动

鼠标跟随火焰[炫]

canvas跟随鼠标

鼠标跟随定点滑动效果

Html

Css

Js

window.onload = function() {
    C = Math.cos; // cache Math objects
    S = Math.sin;
    U = 0;
    w = window;
    j = document;
    d = j.getElementById("c");
    c = d.getContext("2d");
    W = d.width = w.innerWidth;
    H = d.height = w.innerHeight; //w.innerHeight
    c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
    c.globalCompositeOperation = "lighter"; // switch to additive color application
    c.lineWidth = 0.2;
    c.lineCap = "round";
    var bool = 0,
        t = 0; // theta
    d.onmousemove = function(e) {
        if (window.T) {
            if (D == 9) {
                D = Math.random() * 15;
                f(1);
            }
            clearTimeout(T);
        }
        X = e.pageX; // grab mouse pixel coords
        Y = e.pageY;
        a = 0; // previous coord.x
        b = 0; // previous coord.y 
        A = X, // original coord.x
            B = Y; // original coord.y
        R = (e.pageX / W * 999 >> 0) / 999;
        r = (e.pageY / H * 999 >> 0) / 999;
        U = e.pageX / H * 360 >> 0;
        D = 9;
        g = 360 * Math.PI / 180;
        T = setInterval(f = function(e) { // start looping spectrum
            c.save();
            c.globalCompositeOperation = "source-over"; // switch to additive color application
            if (e != 1) {
                c.fillStyle = "rgba(0,0,0,0.02)";
                c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
            }
            c.restore();
            i = 25;
            while (i--) {
                c.beginPath();
                if (D > 450 || bool) { // decrease diameter
                    if (!bool) { // has hit maximum
                        bool = 1;
                    }
                    if (D < 0.1) { // has hit minimum
                        bool = 0;
                    }
                    t -= g; // decrease theta
                    D -= 0.1; // decrease size
                }
                if (!bool) {
                    t += g; // increase theta
                    D += 0.1; // increase size
                }
                q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
                x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); // center on xy coords
                y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
                if (a) { // draw once two points are set
                    c.moveTo(a, b);
                    c.lineTo(x, y)
                }
                c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
                c.stroke();
                a = x; // set previous coord.x
                b = y; // set previous coord.y
            }
            U -= 0.5; // increment hue
            A = X; // set original coord.x
            B = Y; // set original coord.y
        }, 16);
    }
    j.onkeydown = function(e) {
        a = b = 0;
        R += 0.05
    }
    d.onmousemove({
        pageX: 300,
        pageY: 290
    })
}

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

立即下载

超多特效的鼠标跟随效果



代码描述：超多特效的js鼠标移动跟随效果，就是这么溜

下载后上传到空间即可使用：）

5

最新

发表评论全部评论

暂时没有评论！

??0

2017/10/30 10:30:32

给跪
回复

s2903059150

2017/9/27 14:58:17

给跪了
回复

罄?一瞥0

2017/8/29 10:42:17

膜拜
回复

Silence *缄默0

2017/8/25 17:18:38

666666666666666666666666
回复

WangXingWeb0

2017/8/22 10:21:18

好牛叉啊
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>超多特效的鼠标跟随效果-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号