您知道使用 html5 部分标签、锚点、css 和 js 将网页拆分为简单的垂直滑动幻灯片的方法吗?
如果我只是放置section
标签,则这些部分不会占据页面的整个高度,并且用户可以在同一个视口上放置多个部分。
我希望客户端浏览器中的每个部分都是全宽和全高,无论他的屏幕尺寸如何。
谢谢
您需要做的就是使用链接将您带到相关部分,例如:
<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/