0

我正在使用Zurb Foundation创建一个小型网站，并且我有一个带有四个链接的顶部导航栏。
单击每个链接时，我想每次水平滑动到不同的页面。

页面中的内容应该通过 ajax 加载，而不是在访问索引页面本身上加载所有页面。
（注意：幻灯片页面的内容不应在幻灯片动画之后加载，而是以某种方式与幻灯片本身一起加载，否则空滑动看起来有点奇怪）

此外，由于我使用基础来获得响应式布局，我很困惑如何水平放置不同页面的部分。如果网站没有响应，我可能会放置其他页面，并用 margin 属性分隔并滑动它们，我可以做一个animatemargin 属性。

但是，如何在当前页面上获得水平页面滑动效果（以及 ajax 加载）？

4

1 回答 1

1

我想你想要一个“单页网站”？有很多关于这个的教程，但是这个很棒：

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

现场演示可以在这里找到：

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

这使用 jquery 滚动到页面上具有特定 id 的元素。当您单击其中一个菜单项时，它会自动滚动/滑动到页面的该部分。

只是因为代码有点长，我只会发布 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 回答