[微信小程序]手指触摸动画效果(完整代码附效果图)
微信小程序开发交流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>相关文章：
webpack 占位符_通过示例学习Webpack：占位符图像模糊
webpack 占位符by Kalalau Cantrell通过Kalalau Cantrell 通过示例了解Webpack：占位符图像模糊 (Learn Webpack by Example: Blurred placeholder images) The repo that goes along with this post uses webpack 3. If you are interested in learning webpack 4,…
UIImage 各种处理（分类）
1 interface UIImage (conversion)2 3 //压缩图片到宽度10244 (UIImage *)imageCompressSizeToMin1024Width:(UIImage *)image;5 6 7 //修改图片size8 (UIImage *)image:(UIImage *)image byScalingToSize:(CGSize)targetSize;9 10 //UIColor 转UIImage 11 (UIImage *)…
Matlab随笔之矩阵入门知识
直接输入法创建矩阵 – 矩阵的所有元素必须放在方括号“[ ]”内； – 矩阵列元素之间必须用逗号“，”或空格隔开，每行必须用“;”隔开 – 矩阵元素可以是任何不含未定义变量的表达式。可以是实数，或者是复数。 – 例a[1,2;3,4] 或 …
[微信小程序]提交表单返回成功后自动清空表单的值
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 实现思路: 给每一个input绑定相同的value对象,提交成功后把这个对象赋值为空. 下面看代码: <form bindsubmitformsubmit><view><span>* </span>公司名称:&l…
xebium周末启动_我如何在周末建立和启动聊天机器人
xebium周末启动by Mike Williams由Mike Williams 我如何在周末建立和启动聊天机器人 (How I Built And Launched A Chatbot Over The Weekend) 在数小时内将您的想法带入功能性bot，获得真实的用户反馈，并在周末结束前启动！ ？ (Ta…
transition属性值
一、transition-property: transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素…
[微信小程序]下拉菜单
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 动画效果是使用CSS3 keyframes 规则(使 div 元素匀速向下移动) <view class page_row><view class"nav" wx:for{{nav_title}} wx:key"index"><vi…
文件解析库doctotext源码分析
doctotext中没有make install选项，make后生成可执行文件在buile目录下面有.so动态库和头文件，需要的可以从这里面拷贝build/doctotext就是可执行程序。doctotext内置了两种检测文件类型方法：1、以后缀为依据检测文件类型2、以内容为依据检测文…
tmux系统剪切板_实践中的tmux：与系统剪贴板集成
tmux系统剪切板by Alexey Samoshkin通过阿列克谢萨莫什金(Alexey Samoshkin) 在实践中使用tmux：与系统剪贴板集成 (tmux in practice: integration with the system clipboard) 如何在tmux复制缓冲区和系统剪贴板之间建立桥梁，以及如何在OSX或Linux系统…
【Java面试题】54 去掉一个Vector集合中重复的元素
在Java中去掉一个 Vector 集合中重复的元素 1)通过Vector.contains（）方法判断是否包含该元素，如果没有包含就添加到新的集合当中，适用于数据较小的情况下。 import java.util.Vector; public class DeleteVector {public static v…
tornado+nginx上传视频文件
[http://arloz.me/tornado/2014/06/27/uploadvideotornado.html] [NGINX REFRER: Nginx upload module] 由于tornado通过表达上传的数据最大限制在100M，所以如果需要上传视屏文件的情况在需要通过其他方式实现， 此处采用nginx的nginx-upload-module和jQu…
微信小程序swiper组件宽高自适应方法
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 我把 swiper 的 width 设定成了屏幕的95%宽度, 如果想宽度也自适应的话请改成 width:{{width*2}}rpx <swiper classadvertising2 indicator-dots"true" styleheight:{{…
全面访问JavaScript的最佳资源
Looking for a new job is a daunting task. There are so many things to consider when trying to find the perfect role - location, company, job responsibilities, pay and compensation, training and much more.找一份新工作是艰巨的任务。 试图找到理想的职位时&…
Redis集群官方推荐方案 Redis-Cluster
Redis-Cluster redis使用中遇到的瓶颈 我们日常在对于redis的使用中，经常会遇到一些问题 1、高可用问题，如何保证redis的持续高可用性。 2、容量问题，单实例redis内存无法无限扩充，达到32G后就进入了64位世界，性能下降…
[微信小程序]单选框以及多选框实例代码附讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 效果图 <radio-group class"radio-group" bindchange"radioChange"><label class"radio" wx:for"{{k7}}" wx:key"index&q…
IDL_GUI
菜单栏设计 PRO IDLGui;构建界面;显示;添加事件tlbWIDGET_BASE(xsize400,ysize400,/column,mbarmbar);实现基类fileWIDGET_BUTTON(mbar, $ ；新建button，value文件)openwidget_button(file,value打开,/menu)jpgwidget_button(open,valuejpg)existwidget_…
git隐藏修改_您可能不知道的有关Git隐藏的有用技巧
git隐藏修改I have launched a newsletter Git Better to help learn new tricks and advanced topics of Git. If you are interested in getting your game better in Git, you should definitely check that out.我已经发布了Git Better通讯，以帮助学习Git的新技…
css 层叠式样式表（2）
一，样式表分类 （1）内联样式。 --优先级最高，代码重复使用最差。 （当特殊的样式需要应用到单独某个元素时，可以使用。 直接在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。） &…
Hadoop学习笔记之三 数据流向
http://hadoop.apache.org/docs/r1.2.1/api/index.html 最基本的： 1. 文本文件的解析 2. 序列文件的解析 toString会将Byte数组中的内存数据 按照字节间隔以字符的形式显示出来。 文本文件多事利用已有的字符处理类， 序列文件多事创建byte数组࿰…
[微信小程序]星级评分和展示(详细注释附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 星级评分分成两种情况: 一:展示后台给的评分数据 二:用户点击第几颗星星就显示为几星评分; <!--pages/test/test.wxml--> <view> <view>一:显示后台给的评分</…
uber_这就是我本可以免费骑Uber的方式
uberby AppSecure通过AppSecure 这就是我本可以免费骑Uber的方式 (Here’s how I could’ve ridden for free with Uber) 摘要 (Summary) This post is about a critical bug on Uber which could have been used by hackers to get unlimited free Uber rides anywhere in th…
磁盘I/O 监控 iostat
iostat -cdxm 2 5 dm-4 如果没有这个命令，需要安装sysstat 包。 Usage: iostat [ options ] [ <interval> [ <count> ] ]Options are:[ -c ] [ -d ] [ -N ] [ -n ] [ -h ] [ -k | -m ] [ -t ] [ -V ] [ -x ] [ -z ][ <device> [...] | ALL ] [ -p…
[微信小程序]物流信息样式加动画效果(源代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 效果图片:(信息仅为示例) <!--pages/order/order_wl.wxml--> <view classpage_row top><image classgoods src../../images/dsh.png></image><view cl…
在 Ubuntu 14.04 Chrome中安装Flash Player(转)
在 Ubuntu 14.04 中安装 Pepper Flash Player For Chromium 一个 Pepper Flash Player For Chromium 的安装器已经被 Ubuntu14.04 的官方源收录。Flash Player For Linux 自11.2 起已经停止更新，目前 Linux 平台下面的 Flash Player 只能依靠 Google Chrom 的 PPAPI…
数据结构显示树的所有结点_您需要了解的有关树数据结构的所有信息
数据结构显示树的所有结点When you first learn to code, it’s common to learn arrays as the “main data structure.”第一次学习编码时，通常将数组学习为“主要数据结构”。 Eventually, you will learn about hash tables too. If you are pursuing a Comput…
Unity应用架构设计(9)——构建统一的 Repository
谈到 『Repository』 仓储模式，第一映像就是封装了对数据的访问和持久化。Repository 模式的理念核心是定义了一个规范，即接口『Interface』，在这个规范里面定义了访问以及持久化数据的行为。开发者只要对接口进行特定的实现就可以满足对不同…
PHP连接数据库并创建一个表
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 <html> <body><form action"test.class.php" method"post"> title: <input type"text" name"title"><br> centent: <input t…
MyBatis 入门
什么是 MyBatis ？ MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架。MyBatis 避免了几乎所有的 JDBC 代码和手工设置参数以及抽取结果集。MyBatis 使用简单的 XML 或注解来配置和映射基本体，将接口和 Java 的 POJOs(Plain Old Java O…
cms基于nodejs_我如何使基于CMS的网站脱机工作
cms基于nodejsInterested in learning JavaScript? Get my ebook at jshandbook.com有兴趣学习JavaScript吗？ 在jshandbook.com上获取我的电子书 This case study explains how I added the capability of working offline to the writesoftware.org website (whic…
how-to-cartoon-ify-an-image-programmatically
http://stackoverflow.com/questions/1357403/how-to-cartoon-ify-an-image-programmatically 转载于:https://www.cnblogs.com/guochen/p/6655333.html