问题描述
我要创建水平响应页面导航,如下图所示:
I want to create horizontal responsive page navigation as illustrated by the below image :
这是我已经设法做的:
This is what I have managed to do : DEMO
我打了几个砖墙,因为我的回应一定程度,
I have however hit a few brick walls, as mine is responsive to a certain degree, its just as you scale it needs to stick to the page its on and not reveal the others.
如果页面很长,它会显示一个滚动条,这是完美的,但在
Also if the pages are long it shows a scroll bar which is perfect, but on the last slide there is a gap as wide as the scroll-bar.
我有以下要求:
- 需要回应
- 网页需要能够长(800像素),并且仍然可滚动,而最后一个网页上没有间隙。
- 需要在最小ie9上工作
最后这里是它的代码:
CSS:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
width: 100%;
height: 100%;
margin: auto;
overflow-x: hidden;
position: relative;
background: #263729;
}
.page {
width: 100%;
background: #992213;
position: absolute;
top:0;
left: 0;
height: 900px;
}
#page-1 {
background: #0C717A;
}
#page-2 {
background: #009900;
left:100%;
}
#page-3 {
background: #0000FF;
left: 200%;
}
a {
color:#FFF;
}
JS:
function scrollSections() {
jQuery('a.scrollitem').click(function () {
jQuery('a.scrollitem').removeClass('selected');
jQuery(this).addClass('selected');
jQuery('.toggle').css({'display':'none'});
jQuery('.wrapper').scrollTo(jQuery(this).attr('href'), 1200, function(){
jQuery('.toggle').css({'display':'block'});
});
return false;
});
}
scrollSections();
HTML:
<div class="wrapper">
<div id="page-1" class="page">
<a href="#page-1" class="scrollitem selected">page 1</a>
<a href="#page-2" class="scrollitem">page 2</a>
<a href="#page-3" class="scrollitem">page 3</a>
<h3>page 1</h3>
</div>
<div id="page-2" class="page">
<a href="#page-1" class="scrollitem selected">page 1</a>
<a href="#page-2" class="scrollitem">page 2</a>
<a href="#page-3" class="scrollitem">page 3</a>
<h3>page 2</h3>
</div>
<div id="page-3" class="page">
<a href="#page-1" class="scrollitem selected">page 1</a>
<a href="#page-2" class="scrollitem">page 2</a>
<a href="#page-3" class="scrollitem">page 3</a>
<h3>page 3</h3>
</div>
</div>
任何帮助将得到极大的欣赏。
Any Help Would be Greatly Appreciated.
推荐答案
具有左边缘动画的水平幻灯片
此jQuery片段:
Horizontal slides with left-margin animation
This jQuery snippet :
- 计算幻灯片的数量并相应地设置包装的宽度。
- 根据哪个链接点击,
- 切换点击链接的类别以激活链接突出显示
- Calculates the number of slides and set the width of the wrapper accordingly.
- According to which link is clicked,
left-margin
is animated on the wrapper to show the corresponding slide with a smooth transition - Toggles the class of the clicked link for active link highlighting
请注意,此解决方案:
- 仅使用一个菜单事件
对于动态数字,只需要jQuery库幻灯片
for a dynamic number of slides
jQuery:
jQuery :
$(document).ready(function () {
var sildeNum = $('.page').length,
wrapperWidth = 100 * sildeNum,
slideWidth = 100/sildeNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');
$('a.scrollitem').click(function(){
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');
var slideNumber = $($(this).attr('href')).index('.page'),
margin = slideNumber * -100 + '%';
$('.wrapper').animate({marginLeft: margin},1000);
return false;
});
});
HTML:
HTML :
<div class="wrapper">
<nav>
<a href="#page-1" class="scrollitem selected">page 1</a>
<a href="#page-2" class="scrollitem">page 2</a>
<a href="#page-3" class="scrollitem">page 3</a>
</nav>
<div id="page-1" class="page">
<h3>page 1</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>page 2</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>page 3</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
</div>
html, body {
height: 100%;
margin: 0;
overflow-x:hidden;
position:relative;
}
nav{
position:absolute;
top:0; left:0;
height:30px;
}
.wrapper {
height: 100%;
background: #263729;
}
.page {
float:left;
background: #992213;
min-height: 100%;
padding-top: 30px;
}
#page-1 {
background: #0C717A;
}
#page-2 {
background: #009900;
}
#page-3 {
background: #0000FF;
}
a {
color:#FFF;
}
a.selected{
color: red;
}
原始答案:
Original answer: DEMO
这篇关于响应水平页面滑动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!