zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    python_函数
    初始python第三天(三)
    python入门练习题2
    python开发进阶之路(一)
    python入门练习题1
    初识Python第三天(二)
    初识Python第三天(一)
    初识Python第二天(4)
    初识python第二天(3)
    c windows控制台输出颜色文字
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/5752077.html
Copyright © 2011-2022 走看看