微信小程序实现点击效果


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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
vuex vue简单使用知识点总结
Aug 29 Javascript
vue设置默认首页的操作
Aug 12 Javascript
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读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
python中的编码知识整理汇总
2016/01/26 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
建筑工地标语
2014/06/18 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
关于国庆节的广播稿
2015/08/19 职场文书