按鈕點擊波動

學習點擊波動效果學習

點擊波動效果

從效果來分析，從點擊到的點座標
會有一個圓慢慢從小變大，顯隱從1到0

思路

主要思路爲以下四點：
        /* 
         * 1 點擊事件
         * 2 獲取鼠標點擊的座標
         * 3 點擊後在生成一個元素
         * 4 給該元素增加動畫
         * 5 動畫結束後刪除元素
         */
    
    //本文通過向TG大神學習總結得出。

動畫主要用了 關鍵幀@keyFrames 與animation 配合。 transfrom中的scale來控制大小，顯示與隱藏是在關鍵幀動畫裏改變了opacity,點擊波動裏獲得鼠標位置與相對位置有點難理解可以看複習裏的小知識

鼠標的位置

//1.對於獲取鼠標的位置
var x = event.pageX || document.documentElement.scrollLeft + document.bod
y.scrollLeft + event.clientX;
var y = event.pageY || document.documentElement.scrollTop + document.body
.scrollTop + event.clientY;

相對座標

// 獲取相對座標
//offsetWidth:指的是盒模型的邊框 + 內邊距 + 內容的寬度 
var wx = self.offsetWidth;
x = x - self.offsetLeft - wx / 2;
y = y - self.offsetTop - wx / 2;

監聽動畫結束

// animationend 這個事件可以監聽事件結束有兼容問題
var animationEnd = function (elem, handler) {
            elem.addEventListener('animationend', handler, false);
            elem.addEventListener('webkitAnimationEnd', handler, false);
            elem.addEventListener('mozAnimationEnd', handler, false);
            elem.addEventListener('OAnimationEnd', handler, false);
        };

學習複習

圖片來源網絡-簡單易懂的圖

圖片來源於網絡-pageY於ClientY對比

1.瞭解一下幾組變量

pageX與pageY（有兼容性問題）

鼠標指針相對於整個文檔的X座標；
相當與HTML頁面以左上角爲原點而不是可視區域

clientX與clientY（有兼容）

鼠標點擊處與可視區域的的距離

offsetX與offsetY

點擊元素的右上角爲原點的偏移量

layerX與layerY

這個效果與page的一致但不是標準的東西所以一般不使用

screenX與screenY

屏幕的右上角爲原點到點擊的元素的距離

offsetWidth

指的是盒模型的邊框 + 內邊距 + 內容的寬度

可以再下載中下載對比DEMO

網上多數的event的兼容寫法

function foo(event){
    var evt = window.event||event;
    var targetObj = evt.target||evt.srcElement;
}

實際上我測試 ie/chrome/firefox 這三個發現 火狐 輸出的window.event 爲 undefiend

其中有個event對象中有個獲取目標對象的 target 在ie中是srcElement
往往兼容的寫法是如上。

參考資料：

1. stackoverflow
2. 火狐API
3. TG博客

---

DEMO下載

---

代碼查看

---

html

<button class="btn ripple-act" type="button">點擊</button>

css

.btn{
            width: 100px;
            height: 50px;
            outline: none;
            border: none;
            background: #495A80;
            color: #fff;
            border-radius: 20px;
        }

        .ripple {
            border-radius: 50%;
            background: rgba(221, 240, 237, 0.253);
            -webkit-transform: scale(0);
            transform: scale(0);
            position: absolute;
            opacity: 1;
        }
        .ripple-act{
            overflow: hidden;
            position: relative;
        }
        .rippleAct{
            -webkit-animation: rippleAct 2s linear;
            animation: rippleAct 2s linear;
        }
        @keyframes rippleAct {
                    100% {
                        -webkit-transform: scale(2);
                        transform: scale(2);
                        opacity: 0;
                    }
        }

JS

var ripple = function(event,self){
        event = event || window.event;
            // 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;
            var wx = self.offsetWidth;

            x = x - self.offsetLeft - wx / 2; // 獲取偏移量
            y = y - self.offsetTop - wx / 2; 

            var rippleDom = document.createElement("span");
            rippleDom.className = 'ripple';
            var firstChild = self.firstChild;
            if (firstChild) {
                self.insertBefore(rippleDom, firstChild);
            } else {
                self.appendChild(rippleDom);
            };

            rippleDom.style.cssText = 'width: ' + wx + 'px;height: ' + wx + 'px;top: ' + y + 'px; left: ' + x + 'px';
            rippleDom.classList.add('rippleAct');
            
            //監聽動畫結束，刪除波紋元素
            animationEnd(rippleDom, function () {
                this.parentNode.removeChild(rippleDom);
            });
            
        }
        var animationEnd = function (elem, handler) {
            elem.addEventListener('animationend', handler, false);
            elem.addEventListener('webkitAnimationEnd', handler, false);
            elem.addEventListener('mozAnimationEnd', handler, false);
            elem.addEventListener('OAnimationEnd', handler, false);
        };
        var rippleBtns = document.querySelectorAll(".ripple-act");

        for (let i = 0; i < rippleBtns.length; i++) {
            const element = rippleBtns[i];
            element.addEventListener("click", function(e){
                console.log(e.pageX,e.pageY);
                ripple(e,this);
            })
        }