Question

我正在使用以下Flip JQuery插件：

http://lab.smashup.it/flip/

我能够让它工作，但在我的网站上使用它有问题。如何从头开始创建一些东西，点击一个按钮，我可以翻转div，然后点击另一个，它可以恢复到旧状态。

以下是我使用Flip但需要从头开始的内容。

代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="container">
        <div class="real_thing" id="flipbox">
            <a href="#" id="email_flip">
            <div class="button1">
                <span class="line_text">
                    Button 1
                </span>
            </div>
            </a>
            <div class="button2">
                <span class="line_text">
                    Button 2
                </span>
            </div>
            <div class="button3">
                <span class="line_text">
                    Button 3
                </span>
            </div>
        </div>
        <a href="#" class="flip" id="clicker">Flip</a>
        <a href="#" class="flip" id="clicker2" onclick="flip();">Revert</a>
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.flip.js"></script>
    <script type="text/javascript">
    $("#clicker2").click(function(){
    $("#flipbox").revertFlip();

    });
    </script>
    <script type="text/javascript">
    function flip() {
        $("#email_flip").click(function()

        {

            $("#flipbox").flip({

            direction: 'tb',

            content: '<input type="text" placeholder="Email">&nbsp;<input type="text" placeholder="Password">',


        })

        }

        )
    }
    $(document).ready(function() {
        $("#flipbox").on("focus", function(){flip();});
        flip();
    });
    </script>
</body>
</html>

如何使用JQuery进行div翻转？

0 个答案: