<!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. 用Pythonic方式来思考

    一门语言的编程习惯是由用户来确立的.这些年来,Python开发者用Pythonic这个形容词来描述那种符合特定风格的代码. 这种Pyhtonic风格,既不是严密的规范,也不是由编译器强加给开发者的规则 ...

  2. javascript操作常见的html标签

    几乎HTML所有标记都可以说是HTML的控件,如select, input, div, table等.html标签便捷的操作,深受大家的喜欢.现在的大部分网站都是ajax+json来进行数据传送.所以 ...

  3. UITableViewCell高度自适应的关键点

    iOS开发中对于UITableViewCell高度自适应的文章已经很多很多,但如果cell内容比较复杂,刚使用autolayout配置自使用时还是总不能一次性成功. KEY POINT 这里只说设置的 ...

  4. 第五章 python中的异常处理

    每种编程语言都会有自己的异常处理机制,虽然各有特色,但基本上都差不多,那么python中强大异常处理机制是什么样的呢? 一.异常: python用异常对象来表示异常情况,遇到错误后,会引发异常.如果异 ...

  5. B表中的pid对应A表中id，查询A表中数据，根据b表中对应a表中该id的数据数目排序

    B表中的pid对应A表中id,查询A表中数据,根据b表中对应a表中该id的数据数目排序 select a.*,count(*) as c from a left join b on a.id=b.ai ...

  6. [算法]数组的partition调整

    题目一: 给定一个有序数组arr,调整arr使得这个数组的左半部分没有重复部分且升序,而不用保证右部分是否有序. 例如:arr=[1,2,2,2,3,3,4,5,6,6,7,7,8,8,9,9],调整 ...

  7. 最短路N题Tram SPFA

     #include <algorithm>#include <queue>#include <cstdio>#include <cstdlib>#inc ...

  8. 算法（Algorithms）第4版 练习 1.4.5

    a. N b. 1 c. 1 d. N3 e. 1 f. 1 g. 1(0)

  9. 囤题&&发布记录

    声明 && 温馨提示 by ljh2000 听说有人很喜欢狙我......看我不把你们抓起来嘿嘿嘿! 为了采取措施,不让被狙成为生活常态(雾   ,我要闭关锁国辣,我要开始(屯田)囤题 ...

  10. Eclipse debug neutron-server

    1 首先停掉neutron-server kill neutron-server in screen by ctr-c q-svc 2 cp /usr/local/bin/neutron-server ...