[微信小程序]手指触摸动画效果(完整代码附效果图)

来源：互联网发布：firefly rk3288 源码编辑：程序博客网时间：2024/05/06 12:21

欢迎加入新微信小程序开发交流群(173683895)

本文共有两个示例,先上图

示例一: 示例二:

示例一代码(微信小程序):

// pages/test/test.jsPage({  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节点对象,此时为nullif(!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>

阅读全文

1 0