如何将链接添加到此动画按钮

时间：2019-05-23 03:50:42

标签： javascript html web-site-project

本质上，我发现了这个按钮，希望添加到链接到商店的wixsite中。我已经使按钮动画起作用，并且该按钮在wix上作为html元素存在。但是当前所有按钮都在做动画和剂量链接。有人可以编辑此代码，以便在播放动画后将用户重定向到某个链接。

我尝试查找链接代码并将其插入逻辑位置，以确定它可能在哪里工作，但显然我没有找到任何东西。即使这样做，它也可能会在动画完成之前重定向。

这是我没有尝试解决此问题的任何代码。

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

Math.randMinMax = function (min, max, round) {
    var val = min + (Math.random() * (max - min));

    if (round) val = Math.round(val);

    return val;
};
Math.TO_RAD = Math.PI / 180;
Math.getAngle = function (x1, y1, x2, y2) {

    var dx = x1 - x2,
        dy = y1 - y2;

    return Math.atan2(dy, dx);
};
Math.getDistance = function (x1, y1, x2, y2) {

    var xs = x2 - x1,
        ys = y2 - y1;

    xs *= xs;
    ys *= ys;

    return Math.sqrt(xs + ys);
};

var FX = {};

(function () {

    var canvas = document.getElementById('myCanvas'),
        ctx = canvas.getContext('2d'),
        lastUpdate = new Date(),
        mouseUpdate = new Date(),
        lastMouse = [],
        width, height;

    FX.particles = [];

    setFullscreen();
    document.getElementById('button').addEventListener('mousedown', buttonEffect);

    function buttonEffect() {

        var button = document.getElementById('button'),
            height = button.offsetHeight,
            left = button.offsetLeft,
            top = button.offsetTop,
            width = button.offsetWidth,
            x, y, degree;

        for (var i = 0; i < 40; i = i + 1) {

            if (Math.random() < 0.5) {

                y = Math.randMinMax(top, top + height);

                if (Math.random() < 0.5) {
                    x = left;
                    degree = Math.randMinMax(-45, 45);
                } else {
                    x = left + width;
                    degree = Math.randMinMax(135, 225);
                }

            } else {

                x = Math.randMinMax(left, left + width);

                if (Math.random() < 0.5) {
                    y = top;
                    degree = Math.randMinMax(45, 135);
                } else {
                    y = top + height;
                    degree = Math.randMinMax(-135, -45);
                }

            }
            createParticle({
                x: x,
                y: y,
                degree: degree,
                speed: Math.randMinMax(100, 150),
                vs: Math.randMinMax(-4, -1)
            });
        }
    }
    window.setTimeout(buttonEffect, 100);

    loop();

    window.addEventListener('resize', setFullscreen);

    function createParticle(args) {

        var options = {
            x: width / 2,
            y: height / 2,
            color: 'hsla(' + Math.randMinMax(160, 290) + ', 100%, 50%, ' + (Math.random().toFixed(2)) + ')',
            degree: Math.randMinMax(0, 360),
            speed: Math.randMinMax(300, 350),
            vd: Math.randMinMax(-90, 90),
            vs: Math.randMinMax(-8, -5)
        };

        for (key in args) {
            options[key] = args[key];
        }

        FX.particles.push(options);
    }

    function loop() {

        var thisUpdate = new Date(),
            delta = (lastUpdate - thisUpdate) / 1000,
            amount = FX.particles.length,
            size = 2,
            i = 0,
            p;

        ctx.fillStyle = 'rgba(15,15,15,0.25)';
        ctx.fillRect(0, 0, width, height);

        ctx.globalCompositeStyle = 'lighter';

        for (; i < amount; i = i + 1) {

            p = FX.particles[i];

            p.degree += (p.vd * delta);
            p.speed += (p.vs);// * delta);
            if (p.speed < 0) continue;

            p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta);
            p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta);

            ctx.save();

            ctx.translate(p.x, p.y);
            ctx.rotate(p.degree * Math.TO_RAD);

            ctx.fillStyle = p.color;
            ctx.fillRect(-size, -size, size * 2, size * 2);

            ctx.restore();
        }

        lastUpdate = thisUpdate;

        requestAnimFrame(loop);
    }

    function setFullscreen() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
    };
})();
body {
    margin: 0;
    overflow: hidden;
}

#myCanvas {
    display: block;
}

#button {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    position: absolute;
    font-size: 1.5em;
    text-transform: uppercase;
    padding: 7px 20px;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    top: 50%;
    border-radius: 10px;
    color: white;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
    border: 5px solid transparent;
    border-bottom-color: rgba(0,0,0,0.35);
    background: hsla(260, 100%, 50%, 1);
    cursor: pointer;
    outline: 0 !important;
    animation: pulse 1s infinite alternate;
    transition: background 0.4s, border 0.2s, margin 0.2s;
}

    #button:hover {
        background: hsla(220, 100%, 60%, 1);
        margin-top: -1px;
        animation: none;
    }

    #button:active {
        border-bottom-width: 0;
        margin-top: 5px;
    }

@keyframes pulse {
    0% {
        margin-top: 0px;
    }

    100% {
        margin-top: 6px;
    }
}
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>
    <button id="button">Donate</button>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

因此，再次期望的结果是播放按钮的动画，然后重定向到另一页，而当前结果是单击按钮时仅播放动画的按钮。如果有人可以写这段代码，那将非常有帮助。

3 个答案:

答案 0 :(得分：1)

尝试将按钮更改为href链接。您可能必须在id类上添加一些额外的样式，但这应该可行。

<a id="button" href="https://www.linktosite.com">Link Button</a>

答案 1 :(得分：1)

将其放在按钮html标签onclick="location.href='http://www.link.com'"

上

答案 2 :(得分：0)

点击按钮时，您应该添加一个活动。例如：

<button id="button" onclick="window.location.href = 'https://www.google.com';">Donate</button>

演示：

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

Math.randMinMax = function (min, max, round) {
    var val = min + (Math.random() * (max - min));

    if (round) val = Math.round(val);

    return val;
};
Math.TO_RAD = Math.PI / 180;
Math.getAngle = function (x1, y1, x2, y2) {

    var dx = x1 - x2,
        dy = y1 - y2;

    return Math.atan2(dy, dx);
};
Math.getDistance = function (x1, y1, x2, y2) {

    var xs = x2 - x1,
        ys = y2 - y1;

    xs *= xs;
    ys *= ys;

    return Math.sqrt(xs + ys);
};

var FX = {};

(function () {

    var canvas = document.getElementById('myCanvas'),
        ctx = canvas.getContext('2d'),
        lastUpdate = new Date(),
        mouseUpdate = new Date(),
        lastMouse = [],
        width, height;

    FX.particles = [];

    setFullscreen();
    document.getElementById('button').addEventListener('mousedown', buttonEffect);

    function buttonEffect() {

        var button = document.getElementById('button'),
            height = button.offsetHeight,
            left = button.offsetLeft,
            top = button.offsetTop,
            width = button.offsetWidth,
            x, y, degree;

        for (var i = 0; i < 40; i = i + 1) {

            if (Math.random() < 0.5) {

                y = Math.randMinMax(top, top + height);

                if (Math.random() < 0.5) {
                    x = left;
                    degree = Math.randMinMax(-45, 45);
                } else {
                    x = left + width;
                    degree = Math.randMinMax(135, 225);
                }

            } else {

                x = Math.randMinMax(left, left + width);

                if (Math.random() < 0.5) {
                    y = top;
                    degree = Math.randMinMax(45, 135);
                } else {
                    y = top + height;
                    degree = Math.randMinMax(-135, -45);
                }

            }
            createParticle({
                x: x,
                y: y,
                degree: degree,
                speed: Math.randMinMax(100, 150),
                vs: Math.randMinMax(-4, -1)
            });
        }
    }
    window.setTimeout(buttonEffect, 100);

    loop();

    window.addEventListener('resize', setFullscreen);

    function createParticle(args) {

        var options = {
            x: width / 2,
            y: height / 2,
            color: 'hsla(' + Math.randMinMax(160, 290) + ', 100%, 50%, ' + (Math.random().toFixed(2)) + ')',
            degree: Math.randMinMax(0, 360),
            speed: Math.randMinMax(300, 350),
            vd: Math.randMinMax(-90, 90),
            vs: Math.randMinMax(-8, -5)
        };

        for (key in args) {
            options[key] = args[key];
        }

        FX.particles.push(options);
    }

    function loop() {

        var thisUpdate = new Date(),
            delta = (lastUpdate - thisUpdate) / 1000,
            amount = FX.particles.length,
            size = 2,
            i = 0,
            p;

        ctx.fillStyle = 'rgba(15,15,15,0.25)';
        ctx.fillRect(0, 0, width, height);

        ctx.globalCompositeStyle = 'lighter';

        for (; i < amount; i = i + 1) {

            p = FX.particles[i];

            p.degree += (p.vd * delta);
            p.speed += (p.vs);// * delta);
            if (p.speed < 0) continue;

            p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta);
            p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta);

            ctx.save();

            ctx.translate(p.x, p.y);
            ctx.rotate(p.degree * Math.TO_RAD);

            ctx.fillStyle = p.color;
            ctx.fillRect(-size, -size, size * 2, size * 2);

            ctx.restore();
        }

        lastUpdate = thisUpdate;

        requestAnimFrame(loop);
    }

    function setFullscreen() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
    };
})();
body {
    margin: 0;
    overflow: hidden;
}

#myCanvas {
    display: block;
}

#button {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    position: absolute;
    font-size: 1.5em;
    text-transform: uppercase;
    padding: 7px 20px;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    top: 50%;
    border-radius: 10px;
    color: white;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
    border: 5px solid transparent;
    border-bottom-color: rgba(0,0,0,0.35);
    background: hsla(260, 100%, 50%, 1);
    cursor: pointer;
    outline: 0 !important;
    animation: pulse 1s infinite alternate;
    transition: background 0.4s, border 0.2s, margin 0.2s;
}

    #button:hover {
        background: hsla(220, 100%, 60%, 1);
        margin-top: -1px;
        animation: none;
    }

    #button:active {
        border-bottom-width: 0;
        margin-top: 5px;
    }

@keyframes pulse {
    0% {
        margin-top: 0px;
    }

    100% {
        margin-top: 6px;
    }
}
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>
    <button id="button" onclick="window.location.href = 'https://www.google.com';">Donate</button>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

相关问题
最新问题