<!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. java.time.format.DateTimeFormatter

    Java的日期与时间 DateTimeFormatter类是Java 8中日期时间功能里,用于解析和格式化日期时间的类,位于java.time.format包下.   1.预定义的DateTimeFo ...

  2. PAT 1054. 求平均值 (20)

    本题的基本要求非常简单:给定N个实数,计算它们的平均值.但复杂的是有些输入数据可能是非法的.一个“合法”的输入是[-1000,1000]区间内的实数,并且最多精确到小数点后2位.当你计算平均值的时候, ...

  3. 将本地jar包手动复制到Maven库中，在其它电脑上用Maven打包时出错

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/UP19910522/article/details/31396107 背景交代:在做图片水印时候引入 ...

  4. Java找出一组数字的最大值

    形如:int [] nums = {7,2,8,9,1,12}; 解一:两两比较并记录下标,下次比较拿上次比较的最大值和上次比较的下一个进行比较,循环一次找出最大值 /** * @author 马向峰 ...

  5. 利用java servlet实现简单的web请求过滤和跳转

    今日有两个微信web项目合并了,但是还有些链接指向废弃的项目,另外不想在服务器上运行两份相同web项目(1.影响性能.2.维护升级容易出错),因此决定写一个简单链接跳转的项目,spring的filte ...

  6. IONIC3 打包安卓apk详细过程（大量图文）

    经历三天的踩坑,跳坑,相信绝大多数的问题都已经覆盖到了,请仔细按照流程来对照操作及检查. 1.基本依赖环境 nodejs环境 (作为一个前端相信你已经有了)  最好提前配置好node的环境变量,便于全 ...

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

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

  8. jquery 如何获取单选框的值

    jquery 如何获取单选框的值   获取单选框的值有三种方式: 1.$('input:radio:checked').val():2.$("input[type='radio']:chec ...

  9. leetcode 1049 Last Stone Weight II(最后一块石头的重量 II)

    有一堆石头,每块石头的重量都是正整数. 每一回合,从中选出任意两块石头,然后将它们一起粉碎.假设石头的重量分别为 x 和 y,且 x <= y.那么粉碎的可能结果如下: 如果 x == y,那么 ...

  10. Unigui unidbgrid+unidac uniquery联合使用时产生的奇葩问题

    如下一个uniquery查询: SELECT a.id,a.userid,a.name,if(a.completed='T',CONCAT('<a  class="icons" ...