0

StackOverflowの投稿やさまざまなフォーラムを検索しましたが、答えが見つかりません。私は同様の質問に対する答えを見つけましたが、私が理解するのに十分なほどそれを分解するものはありません。PHPとHTMLをよく理解していますが、スクリプトに問題があります。

リンクをクリックして、href（または必要なもの）を取得し、現在のコンテンツをフェードアウトさせ、ロードしようとしているコンテンツ（hrefまたはリンク内のコンテンツ）を見つけてロードするにはどうすればよいですか？フェードインしますか？

私が試したコードのランダムなビットに関する以前の問題：

  1. 読み込み中に別のリンクがクリックされた場合、ページ間を移動しているときに、2番目のページが部分的にフェードインするだけでした。

  2. 各リンクには、そこにリンクするための独自のスクリプトが必要でした。リンクのhrefがクリックされるようにする方法を理解できませんでした。

  3. 例は非常に複雑で、必要なものに正確に変更できませんでした。その過程を理解する必要があります。

4

2 に答える 2

0

何かのようなもの：

$('.link').on('click', function(){
   $('.content').fadeOut().load('/path/to/script', function() {
      $(this).fadeIn();
   });
});

これの鍵は、必要なコンテンツを返すことができる HTML ページまたは PHP スクリプトを使用することです。URL を別の要素から取得するか、スクリプト (呼び出し) にハードコードすることができます。仕組みの詳細についてload()は、jQuery のドキュメントを参照してください。

于 2013-01-17T21:51:04.653 に答える
0

私は実際に少し前にこのようなものを開発しました。

トリック (またはトリック) は、ページを an でラップiframeし、親ウィンドウで、ページが要求されたときにビューにフェードインし、ページが読み込まれたときにフェードアウトする div 要素を持たせることです。

親ウィンドウは次のようになります。

<!DOCTYPE html>
<html>
    <head>
        <title>&lt; Page1 &gt;</title>
        <style>
            html, body{
                font-family:helvetica;
            }
            #fade, iframe {
                position:absolute;
                left:0px;
                top:0px;
                width:100%;
                height:100%;
                border-width:0px;
                z-index:-1;

                opacity:0;

                color:#AAA;
                background-color:#FFF;

                -webkit-transition: opacity 300ms;
                -moz-transition: opacity 300ms;
                -o-transition: opacity 300ms;


            }
            iframe {

                opacity:1;

                z-index:1;
                background-color:#FFF;
            }
        </style>
    </head>
    <body>
        <div id="fade">
        <h1>Loadin..</h1>
        </div>
        <iframe src="p1.html"></iframe>

        <script>

            var fade    = document.getElementById("fade");
            var iframe  = document.getElementsByTagName("iframe")[0];


            var t = null;

            addEventListener("message", function(e) {

                if(t!=null)clearTimeout(t);

                fade.style.zIndex = "2";

                t=setTimeout(function(){
                    fade.style.opacity = "1";
                },0);

            }, true);


            iframe.addEventListener("load", function() {

                if(t!=null)clearTimeout(t);

                t=setTimeout(function(){
                    fade.style.opacity = "0";
                },0);

                document.title = iframe.contentWindow.document.title;


                t=setTimeout(function(){
                    fade.style.zIndex = "-1";
                },300);

            }, true);


        </script>

    </body>
</html>

サブページにはそれぞれ次のコードがあります。

<script>
function go() {
    window.parent.postMessage("showLoadScreen", "*");
}
</script>
<a href="somepage.html" onclick="go()">somepage.html</a>

このコードは、要求されたリソースの読み込みに時間がかかっていない限り、フェーダーがポップアップしないという点で少し異なります。しかし、あなたはその考えを理解します。

はiframe視覚的な目的でのみ存在するため、大きな問題は発生しません。ただし、このコードは HTML5 のpostMessageAPI を使用しているため、少し調整する必要があることに注意してください。

于 2013-01-17T21:57:11.547 に答える