微信小程序实现点击效果


Posted in Javascript onJune 21, 2019

微信小程序动画之点击效果的具体代码,供大家参考,具体内容如下

微信小程序实现点击效果

代码:

js:

// 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)
 },
})

wxml:

<view class="ripple" style="{{rippleStyle}}"></view>
<view class="container" bindtouchstart="containerTap"></view>

wxss:

page{height:100%}
.container{
  width:100%;
  height:100%;
  overflow: hidden
}
.ripple {
  background-color:aquamarine;
  border-radius: 100%;
  height:10px;
  width:10px;
  margin-top: -90px;
  position: absolute;
  
  overflow: hidden
}
@-webkit-keyframes ripple {
  100% {
  webkit-transform: scale(12);
  transform: scale(12);
  background-color: transparent;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
JS利用prototype给类添加方法操作详解
Jun 21 #Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 #Javascript
微信小程序实现弹出菜单动画
Jun 21 #Javascript
js类的继承定义与用法分析
Jun 21 #Javascript
js中值引用和地址引用实例分析
Jun 21 #Javascript
微信小程序实现消息框弹出动画
Apr 18 #Javascript
前端Electron新手入门教程详解
Jun 21 #Javascript
You might like
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
ext实现完整的登录代码
2008/08/08 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
基于python实现简单日历
2018/07/28 Python
详解python while 函数及while和for的区别
2018/09/07 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
python源文件的字符编码知识点详解
2021/03/04 Python
某科技软件测试面试题
2013/05/19 面试题
导购员的岗位职责
2014/02/08 职场文书
高中生学习计划书
2014/09/15 职场文书
会计求职自荐信范文
2015/03/04 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL