js实现翻牌效果 

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

 

posted @ 2016-08-09 10:28  晨落梦公子  阅读(7972)  评论(0)  编辑  收藏  举报