2

我们构建了一个居中的水平网页布局，带有动画 scolling 效果。我们有 5 个菜单，它们使用简单的锚点在不同页面之间导航。由于除了正文（内容）区域外，所有页面都是静态的，我们只需将锚定位在特定的 DIV 中。所以这不是滑动的所有页面，而只是内容部分。研究的效果是从一页到另一页的流畅滚动。如果我们单击第一个菜单项，然后单击最后一个（第 5 个）所有页面一个接一个地滑动直到最后一个......到目前为止一切都很好。

我们从其他站点（一些 css 部分）和小的 jquery 部分中获取了示例代码。但是当我们点击某个菜单时，有时它不会做任何事情，有时不会显示好的幻灯片，最后，不会在好的方向上滑动（会向相反的方向滑动），我们被困在这部分.

HTML

<body>
    <div id="menu">
        <ul>
            <li><a href="#menu1">Page 1</a></li>
            <li><a href="#menu2">Page 2</a></li>
            <li><a href="#menu3">Page 3</a></li>
            <li><a href="#menu4">Page 4</a></li>
            <li><a href="#menu5">Page 5</a></li>
        </ul>
     </div>


    <div align="center" id="body">
      <div id="body_wrapper">
        <div class="body_content_content" id="menu1">menu1 page content</div>
        <div class="body_content_content" id="menu2">menu2 page content</div>
        <div class="body_content_content" id="menu3">menu3 page content</div>
        <div class="body_content_content" id="menu4">menu4 page content</div>
        <div class="body_content_content" id="menu5">menu5 page content</div>
      </div>
    </div>

</body>

CSS

#menu ul li {
 display:inline;   
}

#body {
  width:100%;
  height:200px;
  margin:auto;
  position:relative;
  border: 0px solid red;
  overflow:hidden;
  top:100px;
}

#body_wrapper {
  float:left;
  width:500%;
  padding:0;
  margin:0;
  height: 200px;
}

.body_content_content {
  float:left;
  width:20%;
  height:200px;
  #margin:10px 0;
  position:relative;
}

.body_content_content div:first {
  width:900px;
  padding:20px;
  margin:auto;
  float:none;   
}

查询

$('a[href^="#"]').on('click',function(event){
      var $anchor = $(this);

      $('#body').stop().animate({
          scrollLeft: $($anchor.attr('href')).offset().left
      }, 1000);

      event.preventDefault();
  });

>> 查看网站

>> 这是一个小提琴

在小提琴中，您可以设置 CSS 溢出：显示；在#body ID 中并再次运行小提琴以查看一个正常的 div，其中有 5 个相邻的 div。

嗯，谢谢你的帮助。

4

1 回答 1

1

最后有一种方法可以与一个简单的 jquery 插件Jquery.LocalScroll 一起使用，并且很容易实现

您可以在此处查看完整的详细信息，这是作者插件站点和演示，我们可以在其中一次滚动“X”、“Y”甚至两者。

CSS / HTML 并没有简单地改变看起来像这样的 JavaScript JQuery 块：

$.localScroll.defaults.axis = 'xy';

// Scroll initially if there's a hash (#something) in the url 
$.localScroll.hash({
    target: '#content', // Could be a selector or a jQuery object too.
    queue:true,
    duration:1500
});

$.localScroll({
    target: '#body', // could be a selector or a jQuery object too.
    queue:true,
    duration:1000,
    hash:true,
    onBefore:function( e, anchor, $target ){
        // The 'this' is the settings object, can be modified
    },
    onAfter:function( anchor, settings ){
        // The 'this' contains the scrolled element (#content)
    }
});

此外，您必须添加演示中包含的jquery.scrollTo - min.js和jquery.localscroll-min.js。

现在在我的解决方案中一切正常

于 2013-11-07T21:43:35.610 回答