0

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

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

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

谢谢

4

1 回答 1

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/

于 2013-11-07T10:43:56.210 回答