微信小程序实现图片翻转效果的实例代码
更新时间：2019年09月20日 09:50:25 作者：呓语的风
这篇文章主要介绍了微信小程序实现图片翻转效果的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
老规矩，先上图：
页面：
<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}
总结
以上所述是小编给大家介绍的微信小程序实现图片翻转效果的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了关闭浏览器窗口时弹出提示框，并且可以通过函数控制其失效,需要的朋友可以参考下2014-04-04
不用getURL和fsCommand方法个国外的通信方法，值得一看2008-12-12
这篇文章主要介绍了js module，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了微信小程序 上传图片并等比列压缩到指定大小，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)
7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)...2007-08-08
这篇文章主要介绍了JavaScript中点击事件的写法的相关资料,其中还给大家分享js触发按钮点击功能的实现，本文介绍的非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要给大家介绍了关于js中如何判断一个数是不是素数的三种方法,素数(只能被1和本身整除的数)规律:把这个数除以它之前的每一个数(从2开始)只要找到一个整除(余数为0)就是非素数,需要的朋友可以参考下2023-10-10
本篇文章给大家整理了关于JS中DOM节点的相关知识点以及代码实例，有兴趣的朋友可以跟着学习下。2018-04-04
这篇文章主要为大家详细介绍了小程序实现左滑删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
本篇文章主要介绍了使用JS在浏览器中判断当前网络状态的几种方法，非常具有实用价值，需要的朋友可以参考下2017-05-05
最新评论