web-dev-qa-db-ja.com

jQueryを使用してページ間をスライドする

私は4ページのウェブサイトを持っていて、スライド効果で4ページ間を移行したいと思っています。 #IDを使用してこれを実行したくありません。ボタンまたはリンクを押して次のページにスライドしたい。私はこれがjQueryを使用して実行できることを知っており、これを実行するWebサイトを見てきました。手伝ってください。すべての提案、批判、コメントを事前に感謝します。

jqueryslide
6
Asif Syed

このチュートリアルと例を確認してください http://www.queness.com/post/356/create-a-vertical-horizo​​ntal-and-diagonal-sliding-content-website-with-jquery

基本的に、CSSとHTMLを設定して、必要なすべてのパネル/画面をdiv（行と列）にする必要があります。

次に、各パネルにセレクターを設定し、クリックイベントをバインドします[Code from link] 。

$(document).ready(function() {

    //get all link with class panel
    $('a.panel').click(function () {

                //reset and highlight the clicked link
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        //grab the current item, to be used in resize function
        current = $(this);

                //scroll it to the destination
        $('#wrapper').scrollTo($(this).attr('href'), 800);      

                //cancel the link default behavior
        return false;
    });


    //resize all the items according to the new browser size
    $(window).resize(function () {

        //call the resizePanel function
        resizePanel();
    });

});
8
jose

JQueryを使用してコンテンツを画面からスライドさせることをお勧めします。その後、AJAXを使用してコンテンツを新しいページに更新します。コンテンツを画面の反対側に設定し、jQueryを再度使用します。その側からスライドさせます。

このようなもの...

<div id='wrapper'> // this has a set width and overflow hidden
  <div id='content'>
    your content
  </div>
</div>

ユーザーがリンクをクリックし、「コンテンツ」の余白をアニメーション化して、ページから外れるようにします。 AJAXを実行し、「コンテンツ」をページの反対側に配置し（表示されないように十分な距離）、余白をアニメーション化してスライドして表示します。

3
Luke