本文共有两个示例,先上图
示例一: 示例二:
示例一代码(微信小程序):
-
// 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