<!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. Redis的主从同步手动执行故障切换

    1.准备三个redis配置文件,通过端口的区分,启动三个redis数据库实例,然后配置主从复制. # a6371.conf port 6371 daemonize yes pidfile /data/ ...

  2. YiiFramework(PHP)

    Yii is a high-performance PHP framework best for developing Web 2.0 applications. Ref:http://www.yii ...

  3. 使用基本 SQL 命令

    概述 在本教程中,将学习结构化查询语言 (SQL),包括: 使用基本 SQL 命令 执行基本数据操做 数据库和 SQL 在本系列教程中,目前我们使用平面文本文件来存储数据.平面文本文件可能适合相对较少 ...

  4. mysql 修改表名的方法：sql语句

    在使用mysql时,经常遇到表名不符合规范或标准,但是表里已经有大量的数据了,如何保留数据,只更改表名呢? 可以通过建一个相同的表结构的表,把原来的数据导入到新表中,但是这样视乎很麻烦. 能否简单使用 ...

  5. Data Structure Linked List: Write a function to get the intersection point of two Linked Lists.

    http://www.geeksforgeeks.org/write-a-function-to-get-the-intersection-point-of-two-linked-lists/ 第一第 ...

  6. 【leetcode刷题笔记】Single Number

    题目: Given an array of integers, every element appears twice except for one. Find that single one. No ...

  7. 光流法跟踪fast角点思路

    光流法需要include<opencv2/video/tracking.hpp>,用到列表,所以要include<list><vector>1.读取文件定义图像存储 ...

  8. linux 资源管理

    1. 查看内存信息  free [root@rhel6 script]# free total used free shared buffers cached Mem: -/+ buffers/cac ...

  9. <HTTP协议详解>由浅入深看HTTP

    一. HTTP协议的应用简单概况 HTTP协议的主要特点可概括如下: 1.支持客户/服务器模式.2.简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POST ...

  10. 自底向上归并排序（Merge Sort）

    一.思路 另一种实现归并排序的方法是,先归并微型数组,再成对归并得到的子数组,直到将整个数组归并在一起. 我们先进行1-by-1归并,然后2-by-2归并,4-by-4归并,如此下去. 在最后一次归并 ...