## 點擊水波紋 點擊水波紋是一個使用非常廣泛的特效，它可以根據你在元素上的點擊位置來展開波紋效果。 效果如下：  在這一節中，我們將介紹如何實現點擊水波紋。 **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`