flygirl 2019-06-21
今天千锋扣丁学堂HTML5培训老师给大家分享一篇关于微信小程序实现点击效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,下面我们一起来看一下吧。
微信小程序动画之点击效果的具体代码,供大家参考,具体内容如下
代码:
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; } }
以上就是关于千锋扣丁学堂HTML5培训之微信小程序实现点击效果的全部内容,希望对大家的学习有所帮助,想要了解更多关于HTML5开发方面内容的小伙伴,请关注扣丁学堂HTML5培训官网、微信等平台,扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导,此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群:673883249。
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q