响应水平页面滑动 [英] Responsive horizontal page sliding

问题描述

我要创建水平响应页面导航，如下图所示：

I want to create horizontal responsive page navigation as illustrated by the below image :

这是我已经设法做的： DEMO

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.

我有以下要求：

1. 需要回应


2. 网页需要能够长（800像素），并且仍然可滚动，而最后一个网页上没有间隙。


3. 需要在最小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 :

1. 计算幻灯片的数量并相应地设置包装的宽度。


2. 根据哪个链接点击， 在包装器上以动画形式显示具有平滑过渡的相应幻灯片


3. 切换点击链接的类别以激活链接突出显示

1. Calculates the number of slides and set the width of the wrapper accordingly.
2. According to which link is clicked, left-margin is animated on the wrapper to show the corresponding slide with a smooth transition
3. Toggles the class of the clicked link for active link highlighting

请注意，此解决方案：

1. 仅使用一个菜单事件

对于动态数字，只需要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;
}

---

原始答案： DEMO

---

Original answer: DEMO

这篇关于响应水平页面滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！