0

実際、私はプログラマーではなく、デザイナーです...このケースに回答する人よりも多く.....

フリッププラグインでコンテンツの表示と非表示を適用するのが難しい.....

var init = function(){

            $("#flipTop").click(function(e){


                $("#flipbox").flip({
                    dir: "top",
                    endColor: "white",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html(TOP);
                        $("#flipbox").css();  
                    }
                });
            });

            $("#flipRight").click(function(e){
                $("#flipbox").flip({
                    dir: "right",
                    endColor: "yellow",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html("RIGHT");
                        $("#flipbox").css({
                            color: "red",
                            background: "yellow"
                        });  
                    }
                });
            });
            $("#flipLeft").click(function(e){
                $("#flipbox").flip({
                    dir: "left",
                    endColor: "blue",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html("LEFT");
                        $("#flipbox").css({
                            color: "white",
                            background: "blue"

                        });  
                    }
                });
            });
            $("#flipBottom").click(function(e){
                $("#flipbox").flip({
                    dir: "bottom",
                    endColor: "red",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html("BOTTOM");
                        $("#flipbox").css({
                            color: "yellow",
                            background: "red"
                        });  
                    }
                });
            });



        }

        $(document).ready(init);

================================================== ================================================ 私は上記の JavaScript は冗長すぎると思いました...選択したコンテンツの表示と非表示を変更するには、単純化する必要があります

そして、これが私が作成しようとしたHTMLです........

<ul id="navigation" >  
        <li class="selected">
            <a href="#" id="Top"    rel="white"  rev="777">  TOP   </a></li>  
        <li><a href="#" id="Right"  rel="yellow" rev="777"> RIGHT  </a></li> 
        <li><a href="#" id="Left"   rel="blue"   rev="777">  LEFT  </a></li>  
        <li><a href="#" id="Bottom" rel="red"    rev="777"> BOTTOM </a></li>  
    </ul>






<div id="container">    
<div id="flipbox" class="top">
TOP
</div>
<div id="flipbox"class="right">
RIGHT
</div>
<div id="flipbox"class="left">
LEFT
</div>
<div id="flipbox"class="bottom">
BOTTOM
</div>
</div>

================================================== ========================================

次に、Javaスクリプトコマンド用にこれをコンパイルしようとしましたが、うまくいきませんでした.... :(

$('document').ready(function(){  
    $('#flipbox').flip();  
    $('#navigation li a').each(function(){  
        $(this).click(function(){  
            $('#navigation li').each(function(){  
                $(this).removeClass('selected');  
            });  
            $(this).parent().addClass('selected');  

            var flipid=$(this).attr('id').substr(4);  
            $('#flipbox').flip({   
                dir: $this.attr("id"),
        endColor: $this.attr("rel"),
        duration:$this.attr("rev"),
                onEnd: function(){
             }, flipid, 1);

            return false;  
        });  
    });  
});

私が聞きたいのは、タブナビゲーションをクリックしている間、フリップ効果の後にそれらの作品を表示および非表示にする方法です..

4

1 に答える 1

0

このページのソースコードを表示http://lab.smashup.it/flip/ 理解するのに役立つかもしれません.flipプラグインを試したことはありませんが、喜んでお手伝いします.!!

于 2011-02-10T08:10:21.943 に答える