欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)圖片翻轉(zhuǎn)效果的實例代碼

 更新時間：2019年09月20日 09:50:25   作者：囈語的風  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片翻轉(zhuǎn)效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

老規(guī)矩，先上圖：

頁面：

<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}

總結(jié)

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)圖片翻轉(zhuǎn)效果的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

相關(guān)文章

最新評論