波纹按钮效果

编程问答 2022-06-03

问题描述

请提供有关在按钮上添加波纹效果的脚本的帮助。当前脚本运行良好，但仅在单击按钮时有效，并且效果消失，我希望按住按钮并在按下按钮时将其保留，效果的暗度保持不变。

<style>
.bubble-places {
    visibility: hidden;
}
button.ripple-btn,.ripple-btn {
    overflow: hidden !important;
}

/* Ripple */
.ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: rgba(0,0.4) !important;
    transform: scale(0);
    position: absolute;
    opacity: 1;
}
.rippleEffect {
    animation: rippledrop .35s linear !important;
}

@keyframes rippledrop {
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}
</style>


<script>
$(document).ready(function() {

function RippleBubbleEffect() {
 
let ripple_button = $("div.ripple-btn,button.ripple-btn");
 
    $(ripple_button).on("click",function(e) {

        // Remove any old one
        $(".ripple").remove();

        // Setup
        var posX = $(this).offset().left,posY = $(this).offset().top,buttonWidth = $(this).width(),buttonHeight = $(this).height();

        // Add the element
        $(this).prepend("<span class='ripple'></span>");

        // Make it round!
        if(buttonWidth >= buttonHeight) {
        buttonHeight = buttonWidth;
        } else {
        buttonWidth = buttonHeight; 
        }

        // Get the center of the element
        var x = e.pageX - posX - buttonWidth / 2;
        var y = e.pageY - posY - buttonHeight / 2;

        // Add the ripples CSS and start the animation
        $(".ripple").css({
        width: buttonWidth,height: buttonHeight,top: y + 'px',left: x + 'px'
        }).addClass("rippleEffect");
    });
}

// Вызываем RippleBubbleEffect скрипт
RippleBubbleEffect();

// Вызываем RippleBubbleEffect по нажатию на кнопки
$(document).on('click','div.ripple-btn,button.ripple-btn',function(e){
    RippleBubbleEffect();
});

});
</script>

总的来说，我想要一个类似于材质ui按钮的效果，该效果在按住时保持按钮的状态。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

buttonbuttonjavascriptjquerymaterial-uiripple