0

私はZurb Foundation小さなウェブサイトを作成するために使用しており、4 つのリンクを持つトップ ナビゲーション バーがあります。各リンクをクリックすると、毎回別のページに水平にスライドし
たい。

ページ内のコンテンツは ajax を介してロードする必要があり、インデックス ページ自体にアクセスするときにすべてのページをロードするのではありません。
(注: スライドへのページのコンテンツは、スライド アニメーションの後ではなく、何らかの形でスライド自体と共にロードする必要があります。そうしないと、空のスライドが少し奇妙に見えます)

さらに、レスポンシブ レイアウトを取得するために Foundation を使用しているため、さまざまなページのセクションを水平方向に配置する方法がわかりません。Web サイトが応答しない場合は、他のページを余白プロパティで区切って配置し、それらをスライドさせるために、余白プロパティを実行できたはずanimateです。

しかし、現在のページで (ajax の読み込みと共に) 水平方向のページのスライド効果を得るにはどうすればよいですか?

4

1 に答える 1

1

「単一ページのウェブサイト」が欲しいと思いますか？これについては多くのチュートリアルがありますが、これは素晴らしいです:

http://vandelaydesign.com/blog/web-development/single-page-sliding-nav/

ライブ デモは次の場所にあります。

http://vandelaydesign.com/demos/single-page/

これは jquery を使用して、ページ上の特定の ID を持つ要素にスクロールします。メニュー項目の 1 つをクリックすると、ページのその部分に自動的にスクロール/スライドします。

コードが少し長いので、参考までに Jquery のみを投稿します。

<script type="text/javascript">
$(document).ready(function(){
  $('#topnav').onePageNav({
    currentClass: 'current',
      scrollOffset: 0
  });
});
</script>

$('#nav').onePageNav({
    currentClass: 'current',
    changeHash: false,
    scrollSpeed: 750,
    scrollOffset: 30,
    scrollThreshold: 0.5,
    filter: '',
    easing: 'swing',
    begin: function() {
        //I get fired when the animation is starting
    },
    end: function() {
        //I get fired when the animation is ending
    },
    scrollChange: function($currentListItem) {
        //I get fired when you enter a section and I pass the list item of the section
    }
});

それが役に立てば幸い ：）

于 2013-06-25T09:23:38.747 に答える