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

示例效果

fan.gif

实现步骤

1.准备2张图片,一个在上一个在下

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

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

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

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

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

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

使用说明

  <!--引入js文件-->
  <script src="turn-card.js"></script>
  <script>
    // ...获取两张图片后调用该方法
    turnCardAnimate(up,down);
  </script>

核心代码

/**
 * 翻翻卡动画
 * @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张图片
        up.style.transform = 'perspective(1000px) rotateY('+upDeg+'deg)';
        down.style.transform = 'perspective(1000px) rotateY('+downDeg+'deg)';

        // 当上面的图片翻转到90度,隐藏上面,显示下面的图片
        if(upDeg >= 90){
            up.style.display = 'none';
            down.style.display = 'block';
        }

        // 当上面的图片翻转到180度,初始化设置,清除定时器,并记录是否旋转
        if (upDeg >= 180){
            clearInterval(main.timer);
            downDeg = 180;
            upDeg = 0;
            animateOver = false;
            turnCardAnimate.isTurned = !turnCardAnimate.isTurned;
        }
    },2);
}

源码地址

点击查看源码

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 7,145评论 4 39
  • 比较
    白马姑凉阅读 137评论 0 0
  • 我在慢慢地学着出票,你前两天查单的时候,发现问题都会很耐心地跟我说,还会安慰我说大家都是这样过来的。今天也有碰到客...
    无邪无双阅读 40评论 0 0
  • 吃着刚刚自己炒的韭菜炒鸡蛋,怎么也没有小时候妈妈炒的好吃,记得小时候爸爸和亲戚们喝酒,妈妈就会炒一个韭菜鸡蛋,自己...
    不喜欢头啦啦啦阅读 114评论 0 0
  • 任务描述 基于基础JavaScript练习(一)进行升级 将新元素输入框从input改为textarea 允许一次...
    不喜鹿阅读 381评论 0 0