1

この Web サイト テンプレートのような効果を得るために使用されるものを知りたいです: http://www.templatemonster.com/demo/43491.html

メニューリンクをクリックすると、新しいページにリダイレクトされずに新しいページが表示され、ブラウザが新しいページをリロードするなど、単一のメニューと背景が必要です。スムーズでいいもの。

私はコード (使用する関数 (JQuery の場合) 以外) を探していませんが、これを可能にするためにどのような効果を探す必要がありますか?

ちょうど私を正しい方向に向けてください:)

4

2 に答える 2

0

あなたが望むものを達成する方法はたくさんありますが、これは概念的にそれを行う方法に関する私の提案です:

  1. コンテンツ コンテナをアニメーション化してコンテンツをアニメーション化しpositionます。これにより、ページがスムーズに感じられるはずです。jQueryのドキュメントは、それについてかなり明確なはずです。アンカーの通常の動作をインターセプトする必要があることを忘れないでpreventDefault()くださいreturn false。

  2. AJAX リクエストを使用してコンテンツを取得します。リンクに設定した属性を使用してhref、正しいコンテンツを取得できます。<a>次に、メソッドを使用してイベントをその要素にバインドし.on()ます。を残す理由hrefは、適切なフォールバックを用意するためです。コードに問題が発生した場合、ユーザーが JavaScript を無効にしている場合、または単に JavaScript に対応していないブラウザーを使用している場合でも、ユーザーは引き続きコンテンツにアクセスできます。

これらは、あなたが探しているものを達成するための2つの重要なステップです. サイトをもう少し微調整したい場合は、これらのことについても考えてみてください。

  1. 読み込みを慎重に使用して、Web サイトの応答性を高めます.gif。

  2. コンテンツを二重に提供しない:ユーザーが現在表示されているページのリンクをクリックしているかどうかを確認し、コンテンツを再度取得しません。ユーザーにとってばかげているように見えるだけでなく、サーバーの負荷が無用になります (おそらく重要ではありませんが、それでも)。ただし、常にユーザーを考慮してください。UI の巧妙な使用によってそのリンクが無効になっていることを彼に伝えます。

  3. ブラウザの履歴を操作する: history APIを使用します。あなたのサイトは、よりアクセスしやすく、ユーザーフレンドリーで、SEO フレンドリーになり、見た目もはるかに高度になります。

于 2013-03-11T00:52:46.283 に答える
-1

今ではたくさんの方法があります..簡単な方法です（しかし、それはあまり保守可能な方法ではありません）

すべてのウェブサイトのコンテンツを 1 つのページにまとめ、ページと見なされるすべてのセクションを次のように div で囲みます。

<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us  page goes here </div>

etc...

jqueryを使用して、ホームページ以外のすべてを非表示にします

$(function(){
   $('.contact-us-page').hide();
   $('.other-page').hide();
})

ユーザーが他のページへのリンクをクリックすると、お問い合わせページとしましょう。親を非表示にして、代わりにお問い合わせページをスライドさせます。

$('.contact-us-link').click(function(){
    $('.home-page').hide(1000);
    $('.contact-us-page').show(1000);
})

以上です ：）

これの失敗は、ルーティングがないことです..

これを解決するには、backbone.js のようなものを使用する必要がありますが、これはよく知るのに時間がかかります...

これは、これがどのように機能するかについての簡単なアイデアです..

于 2013-03-11T00:23:46.237 に答える