jquery实现三十种鼠标悬浮动画效果代码

代码语言:html

所属分类:悬停

代码描述:jquery实现三十种鼠标悬浮动画效果代码

代码标签: 鼠标 悬浮 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            a {
                color: #999;
                text-decoration: none;
            }
            li {
                list-style: none;
            }
            body {
                background-color: #222222;
            }
            .xs_ul {
                width: 1072px;
                margin: 100px auto 0;
                font-size: 0;
                line-height: 0;
            }
            .xs_ul li {
                display: inline-block;
                font-size: 20px;
                line-height: 20px;
                background: #fff;
                margin: 20px;
            }
            .xs_ul li a {
                display: block;
                width: 76px;
                text-align: center;
                padding: 15px 30px;
                border: 1px solid #000;
            }
        </style>

        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            (function() {
                function b(t, u, s) {
                    this.t = t;
                    this.u = u;
                    this.c = s.color;
                    this.m1();
                };
                b.prototype = {
                    m1: function() {
                        var t = this;
                        t.d = false;
                        if (t.t.css('position') != 'fixed' && t.t.css('position') != 'absolute') {
                            t.t.css('position', 'relative');
                        }
                        t.w = t.t.width();
                        t.h = t.t.height();
                        t.t.children().each(function() {
                            if ($(this).css('position') != 'fixed' && $(this).css('position') != 'absolute') {
                                $(this).css({
                                    'position': 'relative', 'z-index': '2'
                                });
                            } else if (parseInt($(this).css('z-index')) < 2) {
                                $(this).css({
                                    'z-index': '2'
                                });
                            }
                        });
                        if (t.t.css('background-color') != "rgba(0, 0, 0, 0)") {
                            t.bc = t.t.css('background-color');
                        } else {
                            t.bc = '#ffffff';
                        }
                        t.t.append('<canvas width="'+t.w+'" height="'+t.h+'" style="position:absolute; top:0; left:0; z-index:1;"></canvas>');
                        t.ctx = t.t.children('canvas')[0].getContext('2d');
                        if (t.c === false) {
                            t.t.mouseenter(function() {
                                t.c = 'hsl('+(Math.random()*360)+',60%,80%)';
                                t.ctx.fillStyle = t.c;
                            });
                        } else {
                            t.ctx.fillStyle = t.c;
                        };
                        t.t.mousemove(function(e) {
                            t.x = e.pageX - t.t.offset().left-parseInt(t.t.css('border-left-width'));
                            t.y = e.pageY - t.t.offset().top-parseInt(t.t.css('border-top-width'));
                        });
                        t.a = [];
                        t.t.mouseenter(function(e) {
                            t.f = true;
                            t.x = e.pageX - t.t.offset().left-parseInt(t.t.css('border-left-width'));
                            t.y = e.pageY - t.t.offset().top-parseInt(t.t.css('border-top-width'));
                            t.n1();
                        });
                        t.t.mouseleave(function() {
                            t.f = false;
                        });
                        t.ctx.clearRect(0, 0, t.w, t.h);
                    },
                    n1: function() {
                        var t = this;
                        if (t.u <= 0) {
                            console.warn('请注意,没有第'+t.u+'个效果!!');
                            return false;
                        }
                        if (t.u <= 10) {
                            if (t.u == 1) {
                                if (t.a.length == 0) {
                                    t.x1(t);
                                }
                            } else if (t.u == 2) {
                                if (t.a.length == 0) {
                                    for (var i = 0; i < t.w/2; i++) {
                                        t.a[i] = {
                                            y: t.h
                                        };
                                    }
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x2(t);
                                }
                            } else if (t.u == 3) {
                                if (t.a.length == 0) {
                                    t.x3(t);
                                }
                            } else if (t.u == 4) {
                                if (t.a.length == 0) {
                                    for (var i = 0; i < t.h/5; i++) {
                                        if (i%2) {
                                            t.a[i] = {
                                                x: t.w,
                                                y: 5*i,
                                                w: t.w,
                                                h: 5
                                            };
                                        } else {
                                            t.a[i] = {
                                                x: -t.w,
                                                y: 5*i,
                                                w: t.w,
                                                h: 5
                                            };
                                        }
                                    }
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x4(t);
                                }
                            } else if (t.u == 5) {
                                if (t.a.length == 0) {
                                    t.x5(t);
                                }
                            } else if (t.u == 6) {
                                if (t.a.length == 0) {
                                    t.x6(t);
                                }
                            } else if (t.u == 7) {
                                if (t.a.length == 0) {
                                    t.x7(t);
                                }
                            } else if (t.u == 8) {
                                if (t.a.length == 0) {
                                    t.x8(t);
                                }
                            } else if (t.u == 9) {
                                if (t.a.length == 0) {
                                    t.x9(t);
                                }
                            } else if (t.u == 10) {
                                if (t.a.length == 0) {
                                    t.x10(t);
                                }
                            }
                        } else if (t.u <= 20) {
                            if (t.u == 11) {
                                if (t.a.length == 0) {
                                    t.x11(t);
                                }
                            } else if (t.u == 12) {
                                if (t.a.length == 0) {
                                    t.x12(t);
                                }
                            } else if (t.u == 13) {
                                t.o = 1;
                                if (t.a.length == 0) {
                                    for (var i = 0; i < 4; i++) {
                                        t.a[i] = {
                                            x: t.w/2,
                                            y: t.h/2,
                                            c: t.c
                                        };
                                    }
                                    t.m = 0;
                                    t.z = Math.sqrt(Math.pow(t.w/2, 2)+Math.pow(t.h/2, 2));
                                    t.a[0].x1 = t.w/2 - t.z; t.a[0].y1 = t.h/2;
                                    t.a[1].x1 = t.w/2 + t.z; t.a[1].y1 = t.h/2;
                                    t.a[2].x1 = t.w/2; t.a[2].y1 = t.h/2 + t.z;
                                    t.a[3].x1 = t.w/2; t.a[3].y1 = t.h/2 - t.z;
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x13(t);
                                }
                            } else if (t.u == 14) {
                                if (t.a.length == 0) {
                                    t.z = Math.ceil(t.h/3);
                                    t.zx = t.w/20;
                                    t.zy = t.z/10;
                                    t.a[0] = {
                                        x: 0,
                                        y: -t.z,
                                        w: t.w,
                                        h: t.z
                                    };
                                    t.a[1] = {
                                        x: 0,
                                        y: t.h,
                                        w: t.w,
                                        h: t.z
                                    };
                                    t.a[2] = {
                                        x: -t.w,
                                        y: t.z,
                                        w: t.w,
                                        h: t.z
                                    };
                                    t.a[3] = {
                                        x: t.w,
                                        y: t.z,
                                        w: t.w,
                                        h: t.z
                                    };
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x14(t);
                                }
                            } else if (t.u == 15) {
                                if (t.a.length == 0) {
                                    for (var i = 0; i < t.w/2; i++) {
                                        t.a[i] = {
                                            x: i*2,
                                            y: t.h,
                                            w: 2,
                                            h: t.h
                                        };
                                    }
                                }
                                if (!t.d) {
                                    t.z = 0;
                                    t.d = true;
                                    t.x15(t);
                                }
                            } else if (t.u == 16) {
                                if (t.a.length == 0) {
                                    t.zx = t.w/20;
                                    t.zy = t.h/20;
                                    if (Math.random() < .5) {
                                        if (Math.random() < .5) {
                                            t.a[0] = {
                                                x: 0,
                                                y: 0,
                                                w: 0,
                                                h: 0
                                            };
                                        } else {
                                            t.a[0] = {
                                                x: t.w,
                                                y: 0,
                                                w: 0,
                                                h: 0
                                            };
                                        }
                                    } else {
                                        if (Math.random() < .5) {
                                            t.a[0] = {
                                                x: 0,
                                                y: t.h,
                                                w: 0,
                                                h: 0
                                            };
                                        } else {
                                            t.a[0] = {
                                                x: t.w,
                                                y: t.h,
                                                w: 0,
                                                h: 0
                                            };
                                        }
                                    }
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x16(t);
                                }
                            } else if (t.u == 17) {
                                if (t.a.length == 0) {
                                    for (var i = 0; i < 11; i++) {
                                        t.a[i] = {};
                                        t.a[i].x = i/10*t.w;
                                        if (i%2) {
                                            t.a[i].y = 5;
                                        } else {
                                            t.a[i].y = t.h-5;
                                        }
                                    }
                                    t.a1 = -t.h;
                                    t.a2 = t.h;
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x17(t);
                                }
                            } else if (t.u == 18) {
                                if (t.a.length == 0) {
                                    t.ar = t.w < t.h?t.w/4: t.h/4;
                                    t.z = Math.random()*Math.PI*2;
                                    t.ax = Math.cos(t.z)*t.ar/2;
                                    t.ay = Math.sin(t.z)*t.ar/2;
                                    t.a = [Math.random()*(t.w-t.ar*2)+t.ar,
                                        Math.random()*(t.h-t.ar*2)+t.ar,
                                        t.ax,
                                        t.ay,
                                        t.ar];
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x18(t);
                                }
                            } else if (t.u == 19) {
                                if (t.a.length == 0) {
                                    t.zx = t.w/20;
                                    t.zy = t.h/40;
                                    t.a = [-t.w,
                                        (t.h/2)-1,
                                        t.w,
                                        2];
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x19(t);
                                }
                            } else if (t.u == 20) {
                                if (t.a.length == 0) {
                                    t.z = Math.sqrt(Math.pow(t.w/2, 2)+Math.pow(t.h/2, 2));
                                    t.a = [t.w/2,
                                        t.h/2,
                                        1];
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x20(t);
                                }
                            }
                        } else if (t.u <= 30) {
                            if (t.u == 21) {
                                t.o = 1;
                                if (t.a.length == 0) {
                                    t.x21(t);
                                }
                            } else if (t.u == 22) {
                                if (t.a.length == 0) {
                                    t.zx = t.w/40;
                                    t.zy = t.h/40;
                                    t.z = 18*Math.PI/180;
                                    t.a = [t.w/2,
                                        t.h/2,
                                        0,
                                        0,
                                        0];
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x22(t);
                                }
                            } else if (t.u == 23) {
                                if (t.a.length == 0) {
                                    for (var i = 0; i < 10; i++) {
                                        t.a[i] = {
                                            x: Math.floor(i*t.w/10),
                                            y: -t.h,
                                            w: Math.ceil(t.w/10),
                                            h: t.h
                                        };
                                    }
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x23(t);
                                }
                            } else if (t.u == 24) {
                                t.z = 0;
                                if (t.a.length == 0) {
                                    for (var i = 1; i < t.w; i += 4) {
                                        for (var j = 1; j < t.h; j += 4) {
                                            t.a.push({
                                                x: i, y: j, w: 3, h: 3
                                            });
                                        }
                                    }
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x24(t);
                                }
                            } else if (t.u == 25) {
                                if (t.a.length == 0) {
                                    t.z0 = -90;
                                    t.z1 = 90;
                                    t.a[0] = {
                                        x: 0,
                                        y: 0,
                                        w: t.w,
                                        h: Math.ceil(t.h/2)};
                                    t.a[1] = {
                                        x: 0,
                                        y: Math.ceil(t.h/2),
                                        w: t.w,
                                        h: Math.ceil(t.h/2)};
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x25(t);
                                }
                            } else if (t.u == 26) {
                                if (t.a.length == 0) {
                                    t.z = t.h/40;
                                    for (var i = 0; i < 20; i++) {
                                        t.a[i] = {
                                            x: i*t.w/20,
                                            y: t.h/2,
                                            w: Math.ceil(t.w/20)+1,
                                            h: 0
                                        };
                                    }
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x26(t);
                                }
                            } else if (t.u == 27) {
                                if (t.a.length == 0) {
                                    t.zx = t.w/40;
                                    t.zy = t.h/40;
                                    t.o = 1;
                                    t.z = 1;
                                    t.a = [t.w/2,
                                        t.h/2,
                                        0,
                                        0];
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x27(t);
                                }
                            } else if (t.u == 28) {
                                if (t.a.length == 0) {
                                    t.o = 1;
                                    t.a1 = [];
                                    for (var i = 0; i < t.w/2; i++) {
                                        t.a[i] = {
                                            x: i*2,
                                            y: -t.h,
                                            w: 2,
                                            h: t.h,
                                            t: false
                                        };
                                        t.a1.push(i);
                                    }
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x28(t);
                                }
                            } else if (t.u == 29) {
                                if (t.a.length == 0) {
                                    t.a1 = [];
                                    for (var i = 0; i < t.w/10; i++) {
                                        t.a[i] = {
                                            x: i*10,
                                            y: -t.h,
                                            w: 5,
                                            h: t.h
                                        };
                                    }
                                    for (var j = 0; j < t.h/10; j++) {
                                        t.a1[j] = {
                                            x: -t.w,
                                            y: j*10,
                                            w: t.w,
                                            h: 5
                                        };
                                    }
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x29(t);
                                }
                            } else if (t.u == 30) {
                                if (t.a.length == 0) {
                                    t.z = Math.sqrt(Math.pow(t.w/2, 2)+Math.pow(t.h/2, 2));
                                    t.a = [t.w/2,
                                        t.h/2,
                                        t.z,
                                        -90];
                                }
                                if (!t.d) {
                                    t.d = true;
                                    t.x30(t);
                                }
                            }
                        } else {
                            console.warn('请注意,没有第'+t.u+'个效果!!');
                        }
                    },
                    x1: function(t) {
                        if (t.f) {
                            t.a.push({
                                x: t.x, y: t.y, r: 2, o: 1, c: t.c
                            });
                        }
                        t.ctx.clearRect(0, 0, t.w, t.h);
                        for (var i = 0; i < t.a.length; i++) {
                            t.ctx.beginPath();
                            t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2);
                            t.ctx.closePath();
                            t.ctx.globalAlpha = t.a[i].o;
                            t.ctx.fillStyle = t.a[i].c;
                            t.ctx.fill();
                            t.a[i].o -= .02;
                            t.a[i].r += 1;
                            if (t.a[i].o <= 0) {
                                t.a.splice(i, 1);
                                i--;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a.length > 0) {
                            requestAnimationFrame(function() {
                                t.x1(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                        }
                    },
                    x2: function(t) {
                        t.ctx.clearRect(0, 0, t.w, t.h);
                        t.q = false;
                        t.ctx.fillStyle = t.c;
                        for (var i = 0; i < t.a.length; i++) {
                            if (t.h != t.y) {
                                t.a[i].h = t.h-t.y;
                                for (var j = 0; j < Math.ceil(Math.abs(t.x-(i*2+1))/2)-1; j++) {
                                    t.a[i].h *= 5/6;
                                }
                                t.a[i].h = t.h - t.a[i].h;
                            } else {
                                t.a[i].h = t.h;
                            }
                            if (t.f) {
                                if (t.a[i].h - t.a[i].y < 0) {
                                    t.a[i].y += Math.floor((t.a[i].h-t.a[i].y)/14);
                                } else {
                                    t.a[i].y += Math.ceil((t.a[i].h-t.a[i].y)/14);
                                };
                            } else {
                                t.a[i].y += Math.ceil((t.h-t.a[i].y)/14);
                            };
                            t.ctx.fillRect(i*2, t.a[i].y, 2, t.h*2);
                            if (t.a[i].y < t.h) {
                                t.q = true;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.q) {
                            requestAnimationFrame(function() {
                                t.x2(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                            t.d = false;
                        }
                    },
                    x3: function(t) {
                        if (t.f) {
                            if (Math.random() <= 0.5) {
                                if (Math.random() <= 0.5) {
                                    t.ran = parseInt(Math.random()*t.w);
                                    if (Math.random() <= 0.5) {
                                        t.a.push({
                                            x1: t.ran, y1: -2, x2: t.x-((t.ran-t.x)*(t.h-t.y))/t.y, y2: t.h+2, o: 1, c: t.c
                                        });
                                    } else {
                                        t.a.push({
                                            x1: t.ran, y1: t.h+2, x2: t.x-((t.ran-t.x)*t.y)/(t.h-t.y), y2: -2, o: 1, c: t.c
                                        });
                                    }
                                } else {
                                    t.ran = parseInt(Math.random()*t.h);
                                    if (Math.random() <= 0.5) {
                                        t.a.push({
                                            y1: t.ran, x1: -2, y2: t.y-((t.ran-t.y)*(t.w-t.x))/t.x, x2: t.w+2, o: 1, c: t.c
                                        });
                                    } else {
                                        t.a.push({
                                            y1: t.ran, x1: t.w+2, y2: t.y-((t.ran-t.y)*t.x)/(t.w-t.x), x2: -2, o: 1, c: t.c
                                        });
                                    }
                                }
                            }
                        }
                        t.ctx.clearRect(0, 0, t.w, t.h);
                        for (var i = 0; i < t.a.length; i++) {
                            t.ctx.beginPath();
                            t.ctx.moveTo(t.a[i].x1, t.a[i].y1);
                            t.ctx.lineTo(t.a[i].x2, t.a[i].y2);
                            t.ctx.closePath();
                            t.ctx.globalAlpha = t.a[i].o;
                            t.ctx.strokeStyle = t.a[i].c;
                            t.ctx.lineWidth = 2;
                            t.ctx.stroke();
                            t.a[i].o -= .01;
                            if (t.a[i].o <= 0) {
                                t.a.splice(i, 1);
                                i--;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a.length > 0) {
                            requestAnimationFrame(function() {
                                t.x3(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                        }
                    },
                    x4: function(t) {
                        t.ctx.clearRect(0, 0, t.w, t.h);
                        t.ctx.fillStyle = t.c;
                        for (var i = 0; i < t.a.length; i++) {
                            if (t.f) {
                                if (t.a[i].x > 0) {
                                    t.a[i].x -= Math.ceil(t.a[i].x/14);
                                } else if (t.a[i].x < 0) {
                                    t.a[i].x -= Math.floor(t.a[i].x/14);
                                }
                            } else {
                                if (i%2) {
                                    t.a[i].x -= Math.floor((t.a[i].x-t.w)/14);
                                } else {
                                    t.a[i].x -= Math.ceil((t.a[i].x+t.w)/14);
                                }
                            };
                            t.ctx.fillRect(t.a[i].x, t.a[i].y, t.a[i].w, t.a[i].h);
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a[0].x>-t.w) {
                            requestAnimationFrame(function() {
                                t.x4(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                            t.d = false;
                        }
                    },
                    x5: function(t) {
                        if (t.f) {
                            t.a.push({
                                x: t.x, y: t.y, r: 10, o: 1, c: t.c, xv: (Math.random()-0.5)*5, yv: Math.random()*3+3
                            });
                        }
                        t.ctx.clearRect(0, 0, t.w, t.h);
                        for (var i = 0; i < t.a.length; i++) {
                            t.ctx.globalAlpha = t.a[i].o;
                            t.ctx.fillStyle = t.a[i].c;
                            t.ctx.fillRect(t.a[i].x, t.a[i].y, t.a[i].r, t.a[i].r);
                            t.a[i].o -= .03;
                            t.a[i].yv -= .5;
                            t.a[i].xv -= t.a[i].xv/20;
                            t.a[i].x -= t.a[i].xv;
                            t.a[i].y -= t.a[i].yv;
                            if (t.a[i].o <= 0 || t.a[i].y >= t.h) {
                                t.a.splice(i, 1);
                                i--;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a.length > 0) {
                            requestAnimationFrame(function() {
                                t.x5(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                        }
                    },
                    x6: function(t) {
                        if (t.f && Math.random() < .5) {
                            t.a.push({
                                x: t.w*Math.random(), y: t.h*Math.random(), r: 1, o: 1, c: t.c
                            });
                        }
                        t.ctx.clearRect(0, 0, t.w, t.h);
                        for (var i = 0; i < t.a.length; i++) {
                            t.ctx.beginPath();
                            t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2);
                            t.ctx.closePath();
                            t.ctx.globalAlpha = t.a[i].o;
                            t.ctx.fillStyle = t.a[i].c;
                            t.ctx.fill();
                            t.a[i].o -= .025;
                            t.a[i].r += .4;
                            if (t.a[i].o <= 0) {
                                t.a.splice(i, 1);
                                i--;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a.length > 0) {
                            requestAnimationFrame(function() {
                                t.x6(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                        }
                    },
                    x7: function(t) {
                        if (t.f) {
                            t.tan = Math.random()*2+1;
                            t.a.push({
                                x: t.w*Math.random(), y: -t.tan, r: t.tan, c: t.c
                            });
                        }
                        t.ctx.globalAlpha = 0.3;
                        t.ctx.fillStyle = t.bc;
                        t.ctx.fillRect(0, 0, t.w, t.h);
                        for (var i = 0; i < t.a.length; i++) {
                            t.ctx.beginPath();
                            t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2);
                            t.ctx.closePath();
                            t.ctx.fillStyle = t.a[i].c;
                            t.ctx.fill();
                            t.a[i].x += (t.x-t.w/2)/(t.w/2)*(t.a[i].r-0.7);
                            if (t.a[i].x<-t.a[i].r) {
                                t.a[i].x = t.w+t.a[i].r;
                            } else if (t.a[i].x > t.w+t.a[i].r) {
                                t.a[i].x=-t.a[i].r;
                            }
                            t.a[i].y += t.a[i].r-0.7;
                            if (t.a[i].y >= t.h+t.a[i].r) {
                                t.a.splice(i, 1);
                                i--;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a.length > 0) {
                            requestAnimationFrame(function() {
                                t.x7(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                        }
                    },
                    x8: function(t) {
                        if (t.f) {
                            t.tan = Math.random()*2+1;
                            t.a.push({
                                x: t.w*Math.random(), y: t.tan+t.h, r: t.tan, c: t.c
                            });
                        }
                        t.ctx.globalAlpha = 0.3;
                        t.ctx.fillStyle = t.bc;
                        t.ctx.fillRect(0, 0, t.w, t.h);
                        for (var i = 0; i < t.a.length; i++) {
                            t.ctx.beginPath();
                            t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2);
                            t.ctx.closePath();
                            t.ctx.fillStyle = t.a[i].c;
                            t.ctx.fill();
                            t.a[i].x += (Math.random()-0.5)*2;
                            t.a[i].y -= 1;
                            if (t.a[i].y<=-t.a[i].r) {
                                t.a.splice(i, 1);
                                i--;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a.length > 0) {
                            requestAnimationFrame(function() {
                                t.x8(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                        }
                    },
                    x9: function(t) {
                        if (t.f) {
                            t.tan = Math.random()*3+1;
                            t.a.push({
                                x: Math.random()*t.w, y: Math.random()*t.h, r: t.tan, c: t.c, o: 1
                            });
                        }
                        t.ctx.globalAlpha = 0.3;
                        t.ctx.fillStyle = t.bc;
                        t.ctx.fillRect(0, 0, t.w, t.h);
                        for (var i = 0; i < t.a.length; i++) {
                            t.ctx.beginPath();
                            t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2);
                            t.ctx.closePath();
                            t.ctx.fillStyle = t.a[i].c;
                            t.ctx.globalAlpha = t.a[i].o;
                            t.ctx.fill();
                            t.a[i].x += Math.cos(Math.random()*Math.PI*2);
                            t.a[i].y += Math.sin(Math.random()*Math.PI*2);
                            t.a[i].o -= 0.01;
                            /*if(t.a[i].y>t.a[i].r+t.h || t.a[i].y<-t.a[i].r || t.a[i].x<-t.a[i].r || t.a[i].x > t.a[i].r+t.w){
					t.a.splice(i,1);
					i--;
				}*/
                            if (t.a[i].o <= 0) {
                                t.a.splice(i, 1);
                                i--;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a.length > 0) {
                            requestAnimationFrame(function() {
                                t.x9(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                        }
                    },
                    x10: function(t) {
                        if (t.f) {
                            t.tan = Math.random()*3+1;
                            t.tan2 = Math.random()*Math.PI*2;
                            t.a.push({
                                x: Math.random()*t.w, y: Math.random()*t.h, r: t.tan, c: t.c, t: t.tan2
                            });
                        }
                        t.ctx.globalAlpha = 0.3;
                        t.ctx.fillStyle = t.bc;
                        t.ctx.fillRect(0, 0, t.w, t.h);
                        for (var i = 0; i < t.a.length; i++) {
                            t.ctx.beginPath();
                            t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2);
                            t.ctx.closePath();
                            t.ctx.fillStyle = t.a[i].c;
                            t.ctx.fill();
                            t.a[i].x += Math.cos(t.a[i].t);
                            t.a[i].y += Math.sin(t.a[i].t);
                            if (t.a[i].y > t.a[i].r+t.h || t.a[i].y<-t.a[i].r || t.a[i].x<-t.a[i].r || t.a[i].x > t.a[i].r+t.w) {
                                t.a.splice(i, 1);
                                i--;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a.length > 0) {
                            requestAnimationFrame(function() {
                                t.x10(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                        }
                    },
                    x11: function(t) {
                        if (t.f) {
                            t.tan = Math.random()*3+1;
                            t.tan2 = Math.random()*Math.PI*2;
                            t.a.push({
                                x: t.x, y: t.y, r: t.tan, c: t.c, t: t.tan2
                            });
                        }
                        t.ctx.globalAlpha = 0.3;
                        t.ctx.fillStyle = t.bc;
                        t.ctx.fillRect(0, 0, t.w, t.h);
                        for (var i = 0; i < t.a.length; i++) {
                            t.ctx.beginPath();
                            t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2);
                            t.ctx.closePath();
                            t.ctx.fillStyle = t.a[i].c;
                            t.ctx.fill();
                            t.a[i].x += Math.cos(t.a[i].t);
                            t.a[i].y += Math.sin(t.a[i].t);
                            if (t.a[i].y > t.a[i].r+t.h || t.a[i].y<-t.a[i].r || t.a[i].x<-t.a[i].r || t.a[i].x > t.a[i].r+t.w) {
                                t.a.splice(i, 1);
                                i--;
                            }
                        }
                        t.ctx.globalAlpha = 1;
                        if (t.f || t.a.length > 0) {
                            requestAnimationFrame(function() {
                                t.x11(t);
                            });
                        } else {
                            t.ctx.clearRect(0, 0, t.w, t.h);
                        }
                    },
                    x12: function(t) {
                        if (t.f) {
                            t.tan = Math.random()*3+4;
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0