js实现翻牌效果

时间：2016-08-09 10:46:31 阅读：1437 评论：0 收藏：0 [点我收藏+]

标签：

<!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>

View Code

/**
 * 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();
})();

View Code

js实现翻牌效果

标签：

原文地址：http://www.cnblogs.com/chenluomenggongzi/p/5752077.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行