js+css实现点击按钮水波纹

.ripple-effect {
        position: relative;
        overflow: hidden;
    }
    
    .btn {
        width: 150px;
        height: 40px;
        border: 1px solid #d9d9d9;
        outline: none;
        background: #008DC5;
        color: #fff;
    }
    
    .ripple {
        border-radius: 50%;
        background: rgba(0, 0, 0, .5);
        -webkit-transform: scale(0);
        transform: scale(0);
        position: absolute;
        opacity: 1;
    }
    
    .rippleEffect {
        -webkit-animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);
        animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    .btn-primary .ripple {
        background: rgba(0, 0, 0, .1);
    }
    
    @keyframes rippleEffect {
        100% {
            -webkit-transform: scale(2);
            transform: scale(2);
            opacity: 0;
        }
    }

点击波纹

function ripple(event, $this) {
        event = event || window.event;
        //  获取鼠标位置
        var x = event.pageX || document.documentElement.scrollLeft + document.body.scrollLeft + event.clientX;
        var y = event.pageY || document.documentElement.scrollTop + document.body.scrollTop + event.clientY;
        var wx = $this.offsetWidth;
        x = x - $this.offsetLeft - wx / 2;
        y = y - $this.offsetTop - wx / 2;
        // 添加.ripple元素
        var ripple = document.createElement('span');
        ripple.className = 'ripple';
        var firstChild = $this.firstChild;
        if (firstChild) {
            $this.insertBefore(ripple, firstChild);
        } else {
            $this.appendChild(ripple);
        };
        ripple.style.cssText = 'width: ' + wx + 'px;height: ' + wx + 'px;top: ' + y + 'px;left: ' + x + 'px';
        ripple.classList.add('rippleEffect');
       
    };

    var btn = document.querySelectorAll('.ripple-effect');
    for (var i = 0; i < btn.length; i++) {
        /*addEvent(btn[i], 'click',
            function(e) {
                ripple(e, this);
            });*/
        /*btn[i].onclick = function(e) {
            ripple(e,this);
        }*/

        btn[i].addEventListener('click', function(e){
            ripple(e,this);
        });
         //  监听动画结束，删除波纹元素 有bug
        animationEnd(ripple,
            function() {
                this.parentNode.removeChild(ripple);
            });
    };

我们来看看几段重要的代码：

（1）获取鼠标的位置

var x = event.pageX || document.documentElement.scrollLeft + document.body.scrollLeft + event.clientX;
var y = event.pageY || document.documentElement.scrollTop + document.body.scrollTop + event.clientY;

pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变，||后面的代码是为了兼容IE。

（2）计算相对位置

上面的x和y获取的是相对于文档的鼠标位置，而transform默认是以元素的中心点来转换的，所以我们需要获取相对位置，也就是波纹元素中心点相对于按钮中心点的位置。

    var wx = $this.offsetWidth;
    x = x - $this.offsetLeft - wx / 2;
    y = y - $this.offsetTop - wx / 2;
    ripple.style.cssText = 'width: ' + wx + 'px;height: ' + wx + 'px;top: ' + y + 'px;left: ' + x + 'px';

本身波纹元素ripple的中心点是在元素的中心，所以我们根据鼠标位置和元素的位置，计算应该偏移的位置。

著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。http://ghmagical.com/