<!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. iOS 邓白氏编码的申请

    http://www.cocoachina.com/ios/20161214/18225.html

  2. ros下单目相机校正

    1. 安装对应的驱动与程序包. 图像对应包   http://wiki.ros.org/camera_calibration          在gitbub下载image_pipeline :    ...

  3. 扩展 Yii2 自带的日志组件

    <?php /** * author : forecho <caizhenghai@gmail.com> * createTime : 2015/12/22 18:13 * desc ...

  4. HDU - 1800 Flying to the Mars 【贪心】

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1800 题意 给出N个人的 level 然后 高的level 的 人 是可以携带 比他低level 的人 ...

  5. 【转】kalman滤波

    Kalman Filter是一个高效的递归滤波器,它可以实现从一系列的噪声测量中,估 计动态系统的状态.广泛应用于包含Radar.计算机视觉在内的等工程应用领域,在控制理论和控制系统工程中也是一个非常 ...

  6. [原创]java WEB学习笔记37：EL表达式(简介，运算符，自动类型转换，保留字，隐含对象)

    1.EL 简介 1)EL 全名为 Expression  Language,它原本是 JSTL  1.0 为方便存取数据所自定义的语言 2)语法:EL 语法很简单,它最大的特点就是使用上很方便:${s ...

  7. python详细目录

    python第一篇 第二篇.初识列表字典元祖循环 第三篇.内置方法 第四篇.编码解码 列表.元祖 第五篇.数据类型 第六篇 函数 第七篇.函数二 第八篇.递归.装饰器 第九篇 正则表达式 第十篇.模块 ...

  8. 命令行 -- 命令"%cd%"

    1. @echo off echo 当前盘符:%~d0 echo 当前盘符和路径:%~dp0 echo 当前批处理全路径:%~f0 echo 当前盘符和路径的短文件名格式:%~sdp0 echo 当前 ...

  9. Quota Management and Enforcement

    Neutron API中大多的resource都需要quota limits. Neutron API暴露出一个extension 来管理quota,Quota limits are enforced ...

  10. idea中java异常

    1. Compilation failed: internal java compiler error 解决方案:File-->Setting...-->Build,Execution,D ...