學習點擊波動效果學習
點擊波動效果
從效果來分析，從點擊到的點坐標
會有一個圓慢慢從小變大，顯隱從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
往往兼容的寫法是如上。
參考資料：
代碼查看
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);
})
}
