Question

我正在尝试制作水平滚动布局，我需要这个布局来调整其高度，具体取决于它所在的页面。为此，我设置每个“页面”div而不是正在查看的那个div：none并单击所有页面显示：block然后所选页面保持显示：block而其余页面返回到显示：无。

我试图通过页面获得滚动效果，以便在他们点击并且页面全部显示后：阻止，它滚动到所选页面，然后将其他页面设置为display：none ..但是在设置之后javascript的页面，我无法让滚动工作，它只是直接到页面。

以下是我要http://www.numidia.it/#/homepage

的示例

这是我的网页/页面持有人（容器）的CSS

.container {
    position: relative;
    width: 400%;
}

.page {
    position: absolute;
    width: 25%;

}

.page2,
.page3,
.page4 {
        display: none;
}    

.page1 {
    top: 0;
        left: 0;
}

.page2 {
    top: 0;
    left: 100%;
}

.page3 {
    top: 0;
    left: 200%;
}

.page4 {
    top: 0;
    left: 300%;
}

这是我的javascript：

var $navLinks = $('nav ul li a');


$navLinks.on('click', function(){

    var $this = $(this);


    $('.page').css('display', 'block');
    $navLinks.localScroll({duration:5000, axis:'yx', queue:true });


        if($this.hasClass('page-link-1')){
        $('.page2').css('display', 'none');
        $('.page3').css('display', 'none');
        $('.page4').css('display', 'none');
    }else if($this.hasClass('page-link-2')){
        $('.page1').css('display', 'none');
        $('.page3').css('display', 'none');
        $('.page4').css('display', 'none'); 
    }else if($this.hasClass('page-link-3')){
        $('.page1').css('display', 'none'); 
        $('.page2').css('display', 'none');
        $('.page4').css('display', 'none');
    }else if($this.hasClass('page-link-4')){
        $('.page1').css('display', 'none');
        $('.page2').css('display', 'none');
        $('.page3').css('display', 'none'); 
    }

})

非常感谢任何帮助！

Answer 1

您可以尝试使用jQuery动画： HTML：

 <button onclick="nextPage('0%')">go to page 1</button>
 <button onclick="nextPage('25%')">go to page 2</button>
 <button onclick="nextPage('50%')">go to page 3</button>
 <button onclick="nextPage('75%')">go to page 4</button>

和javascript：

 function nextPage(data)
{
   $('.conainer').animate({'left':data}, 1000);
}

完成这项工作后，您可以尝试使用display none，这样您就不必滚动浏览其余页面了。

如何在点击后发生另一个事件后使用localscroll？

1 个答案: