0

スクロールレイアウトのウェブサイトを作りたいです。このようなもの： 例

ただし、すべてのコンテンツを 1 つの HTML ドキュメントに含めると、ページが非常に重くなる可能性があり、アドレス バーの URL はページごとに変更されません。

しかし、どうすればウェブサイトを水平のように表示できますが、ページが異なるか、アドレスバーに少なくとも異なる URL がありますか? この例のように: 例 2

前もって感謝します。

4

2 に答える 2

3

あなたが投稿した 2 番目の例では、1 つの HTML ドキュメントにすべてのコンテンツが含まれています。唯一の違いは、作成者が、ページが変更されたときに URL にハッシュを追加するロジックを追加したことと、ページの読み込み時にそのハッシュをチェックし、永続化のために指定されたページに事前スクロールするための JavaScript を追加したことです。

別のルートに進み、すべてのコンテンツが HTML ドキュメントに含まれないようにする場合は、ajax を使用して「画面外」のコンテンツを設定できます。

// when a link is clicked...
$.get('/page2', function(response){
    // load the content into an off-screen div
    $('.offscreen-div').html(response);

    // Use some jQuery to slide in the screen here
    my_slide_method($('.offscreen-div'));

    // Update the url hash
    window.location.hash = '!/page2';
});

これは疑似コードですが、これで始められるはずです。

于 2012-08-21T22:05:16.970 に答える
0

例として挙げた 2 番目の Web サイトには、1 ページしかありません。アンカーを使用して、現在のページをマークします。これは、JS が開始時にページの場所を読み取って、ページのその部分に自動的に移動することによっても実行できます。例 2 のこのサイトも、クリックされたときに新しいページをロードするために ajax を使用しています。スライド後にページが読み込まれるときにスライド効果が差し引かれるため、これは使用しないでください。

提案:

  • アニメーションに jQuery を使用する
  • アンカーを使用して、ブラウザのナビゲーションで使用する「ページ」をマークします
  • 最初のページがロードされた後、ajaxを使用して他のページをロードします（ケーシーが言ったように）
于 2012-08-21T22:06:44.863 に答える