一行JS代码实现翻翻卡效果

本文章是由源码时代H5前端讲师分享：一行JS代码实现翻翻卡效果，希望对大家有一定帮助。

实现步骤

准备2张图片，一个在上一个在下

上方的图片不动，下方的图片先翻转180°,并隐藏

记录上方与下方图片的起始角度,上方起始角度为0,下方起始角度为180°

使用定时器累加角度,两张图片同时翻转

当上方的图片翻转到90度时,隐藏该图片,显示下方图片

当上方图片翻转到180度时,停止定时器,并还原记录的起始角度

第二次翻转,正反面角色互转即可

使用说明

// ...获取两张图片后调用该方法

turnCardAnimate(up,down);

核心代码

/**

* 翻翻卡动画

* @param up 在上的图片

* @param down 在下的图片

*/

function turnCardAnimate(up,down) {

if (turnCardAnimate.isTurned){ // 已经旋转过,将两个对象互转

// 取反

var temp = up;

up = down;

down = temp;

}

var upDeg = 0; // 上面图片起始角度

var downDeg = 180; // 下面图片起始角度

down.style.display = 'none'; // 隐藏下面的图片

down.style.transform = 'perspective(1000px) rotateY('+downDeg+'deg)'; // 将下面的图片翻转180°

main.timer = setInterval(function () {

// 翻转每次加1度

upDeg += 1;

downDeg += 1;

// 同时翻转2张图片

// 当上面的图片翻转到90度,隐藏上面,显示下面的图片

if(upDeg >= 90){

}

// 当上面的图片翻转到180度,初始化设置,清除定时器,并记录是否旋转

if (upDeg >= 180){

clearInterval(main.timer);

downDeg = 180;

upDeg = 0;

animateOver = false;

turnCardAnimate.isTurned = !turnCardAnimate.isTurned;

},2);

}

示例效果

本文章由源码时代H5前端学科讲师原创!