[⼩程序]⼿指触摸动画效果（完整代码附效果图）⼩程序开发交流qq  173683895
本⽂共有两个⽰例，先上图
⽰例⼀:  ⽰例⼆:
⽰例⼀代码(⼩程序):
// pages/test/test.js
Page({
containerTap: function (res) {
var that = this
var x = uches[0].pageX;
var y = uches[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" ></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 = BoundingClientRect();
//    BoundingClientRect() ⽅法返回元素的⼤⼩及其相对于视⼝的位置。
var ripple = target.querySelector('.ripple');
//    target.querySelector()⽅法返回⽂档中匹配指定 CSS 选择器的⼀个元素。
console.log(ripple) //这⾥创建⼀个ripple节点对象，此时为null
if(!ripple) {
ripple = ateElement('span'); //这⾥ripple等于<span></span>
//    ateElement()在当前节点创建⼀个标签元素
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();  在指定节点添加元素
}
ve('show');//移除ripple对象名为的'show' CSS 类
//    classList 属性返回元素的类名，可以使⽤ add() 和 remove() ⽅法修改它.该属性⽤于在元素中添加，移除及切换 CSS 类。
var top = e.pageY - p - ripple.offsetHeight / 2 - document.body.scrollTop;
var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
//    e.pageY 显⽰⿏标的位置  offsetHeight 获取元素的⾼度  offsetWidth 获取元素的宽度  scrollTop() ⽅法返回或设置匹配元素的滚动条的垂直位置。    p = top + 'px';
ripple.style.left = left + 'px';
ripple.classList.add('show');
return false;
}
document.addEventListener('click', addRippleEffect);//addEventListener('事件名称'，执⾏函数)监听
事件
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。