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

微信小程序开发交流qq群 173683895

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

示例一: 示例二:

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

// pages/test/test.js
Page({containerTap: function (res) {var that = thisvar 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>

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

微信小程序转发分享打电话功能,完整代码附效果图
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 按钮绑定在页面内发起转发事件onShareApp:(注意这里是button 并且给他设置了open-t ...
微信小程序：地图导航功能实现完整源代码附效果图，讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一:需求及效果图展示从后端API获取到起始地和目的地的经纬度坐标与地名.用户点击起始地便打开地图展示 ...
[微信小程序]动画,从顶部掉花的效果(完整代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: image{ width: 100rpx;height: 100rpx;position: absol ...
微信小程序学习做动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 微信扫码学习,在线指导微信小程序动画效果的实现
微信小程序跑马灯效果完整代码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一:功能介绍及讲解实现的跑马灯(跑马灯里面显示文章的title)的效果,并在右侧有个查看文章的按钮, ...
微信小程序聊天室前后端源码附效果图和数据库结构图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 122 <!-- <button bindtap='close'>关闭</bu ...
[微信小程序]星级评分和展示(详细注释附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分; < ...
微信小程序实现旋转动画效果
问题在小程序中,如果可以用一个动画效果展现一句话或一段文字,会比普通文字呈现更具吸引力,这不仅是体现更多样的文字效果,更是突出这段文字的一个方法.那么接下来就来看一下如何实现一个文字旋转的动画效果吧 ...
微信小程序支付 php后台对接完整代码
这个代码全是干货呀,拿过来可以直接使用.小程序在调起微信支付之前需要5个参数,这时候就需要携带code向后台请求,然后后台根据code获取openid 再进行服务器之间的.... 一.准备工作 1.小 ...

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

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

最新文章

热门文章