Question

＆＃13;

//Adapted from http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design
$(document).ready(function () {
    var ink, d, x, y;
    $(".ripple-dark").mousedown(function (e) {
        if ($(this).find(".circle-dark").length === 0) {
            $(this).prepend("<span class='circle-dark'></span>");
        }

        ink = $(this).find(".circle-dark");
        ink.removeClass("animate-dark");

        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }

        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;

        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate-dark");
    });
});


$(document).ready(function () {
    var ink, d, x, y;
    $(".ripple-light").mousedown(function (e) {
        if ($(this).find(".circle-light").length === 0) {
            $(this).prepend("<span class='circle-light'></span>");
        }

        ink = $(this).find(".circle-light");
        ink.removeClass("animate-light");

        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }

        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;

        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate-light");
    });
});

＆＃13;

.button {
  background: gray;
  padding: 50px;
  color: white;
  text-decoration: none;
}

.ripple-dark,
.ripple-light {
    display: inline-block;
    user-select: none;
    position: relative;
    overflow: hidden;
    z-index: 0;
    cursor: pointer;
    margin-bottom: -5px;
}

.circle-dark {
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 100%;
    transform: scale(0);
}

.animate-dark {
    animation: ripple 0.45s linear;
}

@keyframes ripple {
    80% {
        opacity: 0.9;
        transform: scale(3);
    }
    100% {
        opacity: 0;
        transform: scale(4);
    }
}

.circle-light {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 100%;
    transform: scale(0);
}

.animate-light {
    animation: ripple 0.5s linear;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="button ripple-light" href="http://google.com" target="_blank">Hi</a>

＆＃13;

在玩了一段时间的代码时，我发现了一个很酷的插件，增加了一个＆＃34;涟漪＆＃34;影响你想要的任何元素at this link。我决定稍微玩一下代码，同时创造一个光明与黑暗的“波纹”＃34;按钮的主题。但是，我注意到我的代码存在一些问题。

对于超链接，我对效果的更改在Chrome中完美运行，但需要在Desktop Safari和Firefox中双击。我没有Windows机器，所以我不确定Edge或Internet Explorer是否也有这个问题。我认为这必须与我创建的黑暗和光明主题有关，因为原始代码似乎与超链接一起正常工作。您可以看到我的更改效果at this link的示例。

有人可以帮我弄清楚为什么我对效果的更改需要在某些浏览器中双击，以及防止这种情况发生的方法？我想拥有它，所以只需点击一下，而不是双击。

非常感谢！

浏览器问题与波纹按钮效果

0 个答案: