## 点击水波纹 点击水波纹是一个使用非常广泛的特效，它可以根据你在元素上的点击位置来展开波纹效果。 效果如下：  在这一节中，我们将介绍如何实现点击水波纹。 **1、创建模板** 一般来说，我们都是给一个按钮添加波纹效果，所以，我们需要一个简单的按钮： ``` <button class="btn btn-default ripple-effect">点击波纹</button> ``` 类名`ripple-effect`表示此按钮需要添加点击水波纹效果。 **2、设置CSS样式** ``` .ripple-effect { position: relative; overflow: hidden; } .btn { width:150px; height:40px; border:1px solid #d9d9d9; outline:none; background:#008DC5; color:#fff; } ``` 其实只有`ripple-effect`里的样式是必需的，下面的.btn是为了让按钮更好看。 **3、添加波纹元素** 接下来添加一个放置波纹动画的元素（类名为`ripple`）的样式： ``` .ripple { border-radius: 50%; background: rgba(0, 0, 0, .2); -webkit-transform: scale(0); transform: scale(0); position: absolute; opacity: 1; } ``` 你可以看到，我们给元素添加了`transform:scale(0)`、`border-radius:50%`和`opacity:1`，表示缩放比例为0，设为圆形和透明度为1. **4、添加波纹动画** 再添加动画效果，在后面给类名为`ripple`元素动态添加下面的动画： ``` .rippleEffect { -webkit-animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1); animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1); } @keyframes rippleEffect { 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } ``` 透明度在动画中变为0，而缩放比例变为2，也就是说，圆形由小变大，且透明度逐渐变为0。 **6、添加脚本** 我们添加一个名为ripple的函数，其中包括了获取鼠标位置、获取波纹元素的高宽和left/top、添加`rippleEffect`动画，还有监听动画结束。 ``` 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'); // 监听动画结束，删除波纹元素 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`的中心点是在元素的中心，所以我们根据鼠标位置和元素的位置，计算应该偏移的位置。 **7、添加点击事件** 我们给包含类名`ripple-effect`的元素需要添加点击事件： ``` var btn = document.querySelectorAll('.ripple-effect'); for (var i = 0; i < btn.length; i++) { addEvent(btn[i], 'click', function(e) { ripple(e, this); }); } ``` 如果你需要改变波纹的颜色值，只需这样设置： ``` .btn-primary .ripple { background:rgba(255,255,255,.4); } ``` 源码路径：`WebDemo/JavaScript/ripple`