2

私はこの効果を再現しようとしていますが、これらのサイトを自分で分解するための JavaScript に精通していません。私が探している効果のあるサイトは次のとおりです（ナビゲーションのみ）：

http://www.serialcut.com/
http://www.ultranoir.com/
http://kikk.be/
http://www.marcusthomasllc.com/

  • 現在のページ/セクションの幅を 100% にして、応答性を高め、他のセクションのコンテンツを表示しないようにしたいと考えています。
  • 新しいページが読み込まれているとき、読み込み中の gif はいい感じです (オプション)
  • 最後に、ここで ajax の出番だと思います。私がページにいて、連絡先と言ってホームをクリックした場合、連絡先からホームへのページスライドは1つだけで、その間のすべてのページではありません。

誰かが私のためにこれらのサイトを実際に分解してくれるとは思っていませんが、正しい方向への推進に感謝します. おそらく、私が使用できる jQuery プラグインまたは基本的な概念がいくつかあるでしょう。このサイトを検索しましたが、単純な jQuery スライドイン効果しか見つかりません。

いつもありがとうございます。乾杯

4

2 に答える 2

1

ここにいくつかのオプションがあります。

このチュートリアル: http://www.queness.com/post/356/create-a-vertical-horizo ​​ntal-and-diagonal-sliding-content-website-with-jquery

jQuery scrollTo プラグイン: http://demos.flesler.com/jquery/scrollTo/

Supersized プラグイン: http://buildinternet.com/project/supersized/

または、このチュートリアル: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery /

Googleを使用するだけで、例とプラグインを含む何千ものページがあります。

于 2012-10-12T19:49:23.770 に答える
1

ここでは jQuery を使用します。

    var slideAjax = function(elementid, url, data){
        $('#'+elementid).hide(); //make sure the div we are loading into is hidden
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
        }).done(function(data)){
            $('#'+elementid).html(data).show('slide',{direction: 'right'}, 200); //slide in
        });
    }

複雑さを気にしない場合は、setTimeout を作成して、ローダー html を 200 ミリ秒程度の時間でプッシュできます。次に、done 関数でタイマーをクリアします。そうすれば、ページの読み込みに 200 ミリ秒以上かかる場合にのみローダーが表示されます。これは、ベル カーブ上に読み込み時間をプロットできる場合に便利です。通常、ページの読み込み時間は、0 から X の間、または Y から無限大の逆ベル型曲線上にあります。Y をマッピングできる場合は、ローダーを Y から開始するように設定して、ほんの一瞬だけ表示されて切り取られることがないようにすることができます。

于 2012-10-12T20:00:27.273 に答える