微信小程序实现图片翻转效果的实例代码


Posted in Javascript onSeptember 20, 2019

老规矩,先上图:

微信小程序实现图片翻转效果的实例代码

页面:

<view class='rotateCtn' bindtap='rotateFn'>
 <!--正面的框 -->
 <view class='frame {{class1}}'>
  <image src="{{vo.cover1}}"></image>
 </view>
 <!--背面的框 -->
 <view class='frame {{class2}}'>
  <image src="{{vo.cover2}}"></image>
 </view>
</view>

代码:

data: {
  class1: 'z1', //默认正面在上面
  class2: 'z2'
 },
rotateFn: function(e) {
  let data = this.data;
  if (data.class1 == 'z1' && data.class2 == 'z2') {
   this.run('front', 'back', 'z2', 'z1');
  } else {
   this.run('back', 'front', 'z1', 'z2');
  }
 },
 run: function(a, b, c, d) {
  let that = this;
  that.setData({
   class1: a,
   class2: b,
  })
  setTimeout(function() {
   that.setData({
    class1: c,
    class2: d,
   })
  }, 1000);
 },

还有样式:

page{position: relative;height: 100%;background-color: #F6F6F6}
 
.rotateCtn{position: absolute;width: 70%;height: 70%;left: 15%;bottom: 20%;transform-style:preserve-3d;}
.frame{position: absolute;height: 100%;width: 100%;}
.frame image{height: 100%;width: 100%;border-radius: 8px;}
.front{animation:front 1s linear 1;backface-visibility: hidden;}
.back{animation:back 1s linear 1;}
@keyframes front{from{transform: rotateY(0deg);} to{transform: rotateY(180deg);}}
@keyframes back{from{transform: rotateY(-180deg);} to{transform: rotateY(0deg);}}
.z1{z-index:6}
.z2{z-index:5}

总结

以上所述是小编给大家介绍的微信小程序实现图片翻转效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript preload&amp;lazy load
May 13 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
原生JS实现留言板功能
Feb 08 Javascript
详解JS函数防抖
Jun 05 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 #Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 #Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 #Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 #Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 #Javascript
关于layui 下拉列表的change事件详解
Sep 20 #Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 #Javascript
You might like
Codeigniter校验ip地址的方法
2015/03/21 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python中的多重继承实例讲解
2014/09/28 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
高中生物教学反思
2014/02/05 职场文书
平面设计专业求职信
2014/08/09 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
论文答辩开场白大全
2015/05/27 职场文书
聘任合同书
2015/09/21 职场文书
一文搞懂Java中的注解和反射
2022/06/21 Java/Android