Question

早！以下是使用Flip! jQuery插件的（我不知道最好的）jQuery代码。原来的翻盖很好，但是翻转翻转对我来说不起作用。我尝试了很多不同的东西，但没有成功。这就是我现在所拥有的。

任何帮助将不胜感激！

    $('.flip1').bind("click",function(){
        var elem = $(".toflip");
        if(elem.data('flipped')){
            elem.revertFlip();
            elem.data('flipped',false)
        } else {
            elem.flip({
                direction:'lr',
                dontChangeColor: true,
                onBefore: function(){
                    elem.html(elem.siblings('#flip1Data').html());
                }
            });
            elem.data('flipped',true);
        }
    });
    $('.flip2').bind("click",function(){
        var elem = $(".toflip");
        if(elem.data('flipped')){
            elem.revertFlip();
            elem.data('flipped',false)
        } else {
            elem.flip({
                direction:'lr',
                dontChangeColor: true,
                onBefore: function(){

                    elem.html(elem.siblings('#flip2Data').html());

                }
            });
            elem.data('flipped',true);
        }
    });
    $("#flip1back").bind("click",function(){
        $('.toflip').revertFlip();
        return false;
    });
    $("#flip2back").bind("click",function(){
        $('.toflip').revertFlip();
        return false;
    });

Answer 1

以下代码执行左右翻转。如果要更改翻转方向，只需在JS代码上更改direction属性即可。不要忘记将必要的JS文件上传到您的文件夹（您可以在HTML代码的底部看到它们）。这是指向working example的链接。

<强> CSS：

.button {
    display:inline-block;
    padding:10px;
    color:#fff;
    cursor:pointer;
    margin-top:40px;
}
.button#left {
    background-color:green;
}
.button#revert {
    background-color:red;
    display:none;
}
#flipbox {
    width: 500px;
    height: 200px;
    line-height: 200px;
    background-color: #ff9000;
    font-family: 'ChunkFive Regular', Tahoma, Helvetica;
    font-size: 2.5em;
    color: #ffffff;
    text-align: center;
}

<强> HTML：

<div id="flipbox">front content</div>
<div class="button" id="left">left</div>
<div class="button" id="revert">revert</div>


<!-- JavaScript at the bottom for fast page loading -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>

<script type="text/javascript">
    $(function(){

        $("#left").bind("click",function(){
            var $this = $(this);
            $("#flipbox").flip({
                direction: "rl",
                color: "#39AB3E",
                content: "back content",
                onBefore: function(){$("#revert").css('display','inline-block');}
            })
            return false;
        });

        $("#revert").bind("click",function(){
            $("#flipbox").revertFlip();
            return false;
        });

    });
</script>

修改

只有在第一次左翻后才会显示还原按钮：如果您仍然无法执行此操作，则无法恢复翻转:)代码和工作示例都是最新的。

使用jQuery翻转，无法恢复翻转到触发

1 个答案: