电脑疯子技术论坛|电脑极客社区

微信扫一扫 分享朋友圈

已有 2067 人浏览分享

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

[复制链接]
2067 0
本帖最后由 zhaorong 于 2019-9-20 11:58 编辑

这篇文章主要介绍了微信小程序实现图片翻转效果的实例代码代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
老规矩,先上图:

页面:
<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>

代码:
  1. data: {
  2.   class1: 'z1', //默认正面在上面
  3.   class2: 'z2'
  4. },
  5. rotateFn: function(e) {
  6.   let data = this.data;
  7.   if (data.class1 == 'z1' && data.class2 == 'z2') {
  8.    this.run('front', 'back', 'z2', 'z1');
  9.   } else {
  10.    this.run('back', 'front', 'z1', 'z2');
  11.   }
  12. },
  13. run: function(a, b, c, d) {
  14.   let that = this;
  15.   that.setData({
  16.    class1: a,
  17.    class2: b,
  18.   })
  19.   setTimeout(function() {
  20.    that.setData({
  21.     class1: c,
  22.     class2: d,
  23.    })
  24.   }, 1000);
  25. },
复制代码

还有样式:
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}

总结
以上所述是小编给大家介绍的微信小程序实现图片翻转效果的实例代码,希望对大家有所帮助!

您需要登录后才可以回帖 登录 | 注册

本版积分规则

1

关注

0

粉丝

9021

主题
精彩推荐
热门资讯
网友晒图
图文推荐

Powered by Pcgho! X3.4

© 2008-2022 Pcgho Inc.