<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #container {

            width: 200px;

            height: 200px;

        }

        .card{

            width: 100%;

            height:100%;

            margin: 0 auto;

            overflow: hidden;

        }

        .card_a{

            background-color: red;

        }

        .card_b{

            background-color: blue;

            display: none;

        }

    </style>

</head>

<body>

<div id="container">

    <div class="card card_a">A</div>

    <div class="card card_b">B</div>

</div>

<script src="main.js"></script>

</body>

</html>
/**

 * Created by Administrator on 2016/8/9.

 */

(function () {

    var cardA = document.querySelector("#container .card_a");

    var cardB = document.querySelector("#container .card_b");

    var container = document.querySelector("#container");

    var playing = false;

    var aVisible = false;

    function showA() {

        if (!aVisible) {

            cardA.style.display = "block";

            cardB.style.display = "none";

            aVisible = true;

        }

    }

    function showB() {

        if (aVisible) {

            cardA.style.display = "none";

            cardB.style.display = "block";

            aVisible = false;

        }

    }

    function turnFromTo(from, to) {

        if (!playing) {

            playing = true;

            var widthPrecent = 100;

            var speed = widthPrecent / 20;

            var id = setInterval(function () {

                widthPrecent -= speed;

                from.style.width = widthPrecent + "%";

                if (widthPrecent <= 0) {

                    clearInterval(id);

                    if (aVisible) {

                        showB();

                    } else {

                        showA();

                    }

                    to.style.width = "0";

                    id = setInterval(function () {

                        widthPrecent += speed;

                        if (widthPrecent >= 100) {

                            widthPrecent = 100 + "%";

                            clearInterval(id);

                            playing = false;

                        }

                        to.style.width = widthPrecent + "%";

                    }, 20);

                }

            }, 20);

        }

    }

    function turnToA() {

        turnFromTo(cardB, cardA);

    }

    function turnToB() {

        turnFromTo(cardA, cardB);

    }

    function init() {

        showA();

        container.onclick = function (event) {

            if (aVisible) {

                turnToB();

            }

            else {

                turnToA();

            }

        }

    }

    init();

})();

js实现翻牌效果的更多相关文章

  1. 使用JS与CSS3的翻转实现3D翻牌效果

    之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...

  2. css3之3D翻牌效果

      最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...

  3. jQuery精仿手机上的翻牌效果菜单

    代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...

  4. 【JQuery插件】扑克正反面翻牌效果

    里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <ht ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  7. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  9. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

随机推荐

  1. HDU 4824 Disk Schedule

    //

  2. mysql复制表结构和内容

    许多时候我们想复制一张表部分或者全部内容,或者只复制一张表的框架,这种需求应该说我们很常见. 其实想要实现这种需求十分简单. 表一: mysql> select * from student_i ...

  3. html5 canvas做的图表插件

    用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...

  4. 《程序员代码面试指南》第二章 链表问题 将单链表每K个节点之间逆序

    样例 链表1-2-3-4-5-6-7-8-9-10 K=3 ,结果 3-2-1-6-5-4-9-8-7-10 java代码 /** * @Description:将单链表每K个节点之间逆序 * @Au ...

  5. 第四章 python中的面向对象设计

    一.首先来理解几个面向对象的关键特性: 1.封装:对象可以将他们的内部状态隐藏起来.python中所有特性都是公开可用的. 2.继承:一个类可以是一个或多个类的子类.python支持多重继承,使用时需 ...

  6. 0417 封装 property、classmethod、staricmethod

    一.封装 把一堆东西装在一个容器里 函数和属性装到了一个非全局的命名空间 class A: __N = 123 # 静态变量 def func(self): print(A.__N) # 在类的内部使 ...

  7. android HDMI (一)：HDMI基础篇【转】

    本文转载自:http://blog.csdn.net/xubin341719/article/details/7713450 说到android的HDMI,从android 2.2.android2. ...

  8. 圆方树&广义圆方树[学习笔记]

    仙人掌 圆方树是用来解决仙人掌图的问题的,那什么是仙人掌图呢? 如图,不存在边同时属于多个环的无向连通图是一棵仙人掌 圆方树 定义 原先的仙人掌图,通过一些奇妙的方法,可以转化为一棵由圆点,方点和树边 ...

  9. 启动Hadoop时DFSZKFailoverController没有启动

    在启动Hadoop成功后,并没有报错信息,jps查看进程,发现DFSZKFailoverController没有启动成功,后来发现是因为防火墙的原因,关掉重试就OK了 systemctl stop f ...

  10. ajax经典案例--省市联动

    ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...