html - 使用导航在垂直幻灯片中垂直拆分网站页面的简单 html5 方法

Question

您知道使用 html5 部分标签、锚点、css 和 js 将网页拆分为简单的垂直滑动幻灯片的方法吗？

如果我只是放置section标签，则这些部分不会占据页面的整个高度，并且用户可以在同一个视口上放置多个部分。

我希望客户端浏览器中的每个部分都是全宽和全高，无论他的屏幕尺寸如何。

谢谢

Answer 1

您需要做的就是使用链接将您带到相关部分，例如：

<a  href="#slide1">Slide 1</a>
<a  href="#slide2">Slide 2</a>
<a  href="#slide3">Slide 3</a>

<section id="slide1" class="slide">
    <h1>section 1</h1>
    <p>This is a section</p>
</section>

<section id="slide2" class="slide">
    <h1>section 2</h1>
    <p>This is a section</p>
</section>

<section id="slide3" class="slide">
    <h1>section 3</h1>
    <p>This is a section</p>
</section>

使用 css：

body, html {
  height: 100%;
}

.slide {
  height: 100%;
}

section{
    margin-bottom:400px;
}

要获得平滑滚动，您可以使用此 jQuery：

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

演示：http: //jsfiddle.net/vA9ga/4/