如何用jQuery实现仿Material Design的波纹点击效果

Material Design中的波纹点击效果通过水波扩散的视觉反馈增强用户交互体验。使用jQuery实现该效果，核心在于监听元素的鼠标事件，获取点击位置，并动态生成圆形动画节点。这种方式比单纯依赖CSS伪类更灵活，能够适配任意尺寸和动态生成的元素。

波纹效果的实现原理

波纹效果的本质是在被点击的元素内部，创建一个圆形元素，将其初始位置定位到鼠标点击的坐标处，然后通过CSS过渡或动画将其放大并降低透明度，从而形成扩散消失的视觉效果。使用jQuery可以方便地绑定事件、计算坐标以及操作DOM节点。

具体流程分为三步：首先，在元素的mousedown或click事件中，通过event.pageX和event.pageY获取视口坐标，再减去元素自身的偏移量得到相对坐标；其次，创建一个span标签作为波纹节点，设置其宽度和高度等于元素对角线长度的二倍，以保证能覆盖整个元素；最后，利用CSS的transform: scale()和opacity属性做动画，动画结束后用jQuery的remove()方法清理节点。

需要注意被点击元素必须设置position: relative以及overflow: hidden，否则波纹会溢出容器。波纹节点则应设为position: absolute且border-radius: 50%。以下代码展示了基础的事件绑定结构：

$(document).on('mousedown', '.ripple-btn', function(e) {
    var $this = $(this);
    var offset = $this.offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    var diameter = Math.max($this.width(), $this.height());
    var $ripple = $('<span class="ripple"></span>');
    $ripple.css({
        width: diameter,
        height: diameter,
        left: x - diameter / 2,
        top: y - diameter / 2
    });
    $this.append($ripple);
    setTimeout(function() {
        $ripple.remove();
    }, 600);
});

完整的jQuery插件封装与样式设计

为了在项目里复用波纹效果，通常会将其封装为一个jQuery插件。插件内部自动为所有匹配选择器的元素绑定事件，并支持配置动画时长与颜色。这样开发者只需要在HTML里添加特定类名，就能让普通按钮拥有Material风格反馈，而不必每次手写事件逻辑。

在CSS层面，波纹节点需要定义初始的transform: scale(0)和opacity: 0.6，配合transition实现平滑放大。使用pointer-events: none可以避免波纹节点拦截后续点击。下面给出配套的样式与插件代码，其中插件通过$.fn.extend挂载到jQuery原型上：

.ripple-btn {
    position: relative;
    overflow: hidden;
    user-select: none;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    transform: scale(0);
    opacity: 0.6;
    pointer-events: none;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
.ripple.active {
    transform: scale(2);
    opacity: 0;
}

(function($) {
    $.fn.rippleEffect = function(options) {
        var settings = $.extend({ color: 'rgba(255,255,255,0.7)' }, options);
        this.each(function() {
            var $el = $(this);
            $el.addClass('ripple-btn');
            $el.on('mousedown', function(e) {
                var offset = $el.offset();
                var x = e.pageX - offset.left;
                var y = e.pageY - offset.top;
                var d = Math.max($el.width(), $el.height()) * 2;
                var $r = $('<span class="ripple"></span>').css({
                    width: d, height: d, left: x - d / 2, top: y - d / 2, background: settings.color
                });
                $el.append($r);
                $r.addClass('active');
                setTimeout(function() { $r.remove(); }, 600);
            });
        });
        return this;
    };
})(jQuery);

这种封装方式让调用变得非常简单，只需在文档加载完成后执行$('.my-button').rippleEffect()即可。如果页面中存在通过Ajax动态插入的按钮，可以在插入后重新调用插件，或者改用事件委托的方式绑定到父级容器，从而保证新元素也能获得波纹交互。

性能优化与移动端兼容处理

在大量按钮或列表项上使用波纹效果时，频繁创建和删除DOM节点可能引发一定的性能开销。优化手段包括使用transitionend事件替代固定的setTimeout，以确保节点在动画真正结束后再移除；同时可对波纹节点做对象池缓存，减少浏览器重排次数。对于低版本浏览器，若不支持transform过渡，可降级为简单的透明度变化。

移动端设备上应额外监听touchstart事件，因为手机浏览器不会立即触发mousedown。通过同时绑定鼠标与触摸事件，并调用e.touches[0].pageX获取坐标，可以保证在触摸屏上也有一致的波纹反馈。此外，建议对波纹容器开启will-change: transform以提升合成层渲染效率，但不可滥用以免占用过多内存。

下面的示例演示了如何合并鼠标与触摸事件，并利用transitionend清理节点，使代码更健壮：

function bindRipple($el) {
    function show(e) {
        var point = e.touches ? e.touches[0] : e;
        var offset = $el.offset();
        var d = Math.max($el.width(), $el.height()) * 2;
        var $r = $('<span class="ripple"></span>').css({
            width: d, height: d,
            left: point.pageX - offset.left - d / 2,
            top: point.pageY - offset.top - d / 2
        });
        $el.append($r);
        requestAnimationFrame(function() { $r.addClass('active'); });
        $r.on('transitionend', function() { $r.remove(); });
    }
    $el.on('mousedown touchstart', show);
}

经过上述处理，仿Material Design的波纹点击效果不仅能够在桌面端流畅运行，也能在移动端提供自然的交互反馈，且代码具备良好的可维护性与扩展空间。

jQueryripple_effectMaterial_Design修改时间：2026-08-14 20:00:30