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


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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 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
ajax php 实现写入数据库
2009/09/02 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
项目建议书格式
2014/03/12 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
植物生产学专业求职信
2014/08/08 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers