手指觸控動畫效果(完整程式碼附效果圖)
本文共有兩個示例,先上圖
示例一: 示例二:
示例一程式碼(微信小程式):
-
// pages/test/test.js -
Page({ -
containerTap: function (res) { -
var that = this -
var x = res.touches[0].pageX; -
var y = res.touches[0].pageY + 85; -
this.setData({ -
rippleStyle: '' -
}); -
setTimeout(function () { -
that.setData({ -
rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;' -
}); -
},200) -
}, -
})
-
<view class="ripple" style="{{rippleStyle}}"></view> -
<view class="container" bindtouchstart="containerTap"></view>
-
page{height:100%} -
.container{ -
width:100%; -
height:100%; -
overflow: hidden -
} -
.ripple { -
background-color: rgba(0, 0, 0, 0.6); -
border-radius: 100%; -
height:10px; -
width:10px; -
margin-top: -90px; -
position: absolute; -
-webkit-transform: scale(0); -
overflow: hidden -
} -
@-webkit-keyframes ripple { -
100% { -
-webkit-transform: scale(12); -
transform: scale(12); -
background-color: transparent; -
} -
}
示例二程式碼(html5)
-
<!DOCTYPE html> -
<html> -
<head> -
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> -
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> -
<title>點選後水波紋擴散填充元件效果</title> -
<style> -
.btn { -
position: relative; -
width: 13em; -
height: 3em; -
margin: 2em; -
border: none; -
outline: none; -
letter-spacing: .2em; -
font-weight: bold; -
background: #F6774F; -
cursor: pointer; -
overflow: hidden; -
user-select: none; -
border-radius: 2px; -
color: #fff; -
} -
.ripple { -
position: absolute; -
background: rgba(0, 0, 0, .15); -
border-radius: 100%; -
transform: scale(0); -
pointer-events: none; -
} -
.ripple.show { -
animation: ripple 1s ease-out; -
} -
@keyframes ripple { -
to { -
transform: scale(2); -
opacity: 0; -
} -
} -
</style> -
</head> -
<body> -
<h1 class="center mt40">點選後水波紋擴散填充元件效果</h1> -
<div class="main center"> -
<button id="bowen" class="btn ">BUTTON</button> -
</div> -
<script> -
var addRippleEffect = function(e) { -
var target = e.target; -
// target 事件屬性可返回事件的目標節點（觸發該事件的節點） -
// console.log(e.target) -
if(target.id != 'bowen') return false; -
// 如果當前節點的id不等於'bowen',就返回false,停止執行函式 -
var rect = target.getBoundingClientRect(); -
// target.getBoundingClientRect() 方法返回元素的大小及其相對於視口的位置。 -
var ripple = target.querySelector('.ripple'); -
// target.querySelector()方法返回文件中匹配指定 CSS 選擇器的一個元素。 -
console.log(ripple) //這裡建立一個ripple節點物件,此時為null -
if(!ripple) { -
ripple = document.createElement('span'); //這裡ripple等於<span></span> -
// document.createElement()在當前節點建立一個標籤元素 -
ripple.className = 'ripple';//這裡ripple等於<span class="ripple"></span> -
// 給ripple新增一個樣式類名 -
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';//這裡height和width是相等的 -
// Math.max(a,b)返回兩個指定的數中帶有較大的值的那個數。 -
target.appendChild(ripple);//在當前節點新增ripple元素物件 -
// appendChild(); 在指定節點新增元素 -
} -
ripple.classList.remove('show');//移除ripple物件名為的'show' CSS 類 -
// classList 屬性返回元素的類名,可以使用 add() 和 remove() 方法修改它.該屬性用於在元素中新增，移除及切換 CSS 類。 -
var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop; -
var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft; -
// e.pageY 顯示滑鼠的位置 offsetHeight 獲取元素的高度 offsetWidth 獲取元素的寬度 scrollTop() 方法返回或設定匹配元素的滾動條的垂直位置。 -
ripple.style.top = top + 'px'; -
ripple.style.left = left + 'px'; -
ripple.classList.add('show'); -
return false; -
} -
document.addEventListener('click', addRippleEffect);//addEventListener('事件名稱',執行函式)監聽事件 -
</script> -
</body> -
</html>
轉自：https://blog.csdn.net/qq_35713752/article/details/78682954