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

How to use localscroll after another event occurs on click?

本文关键字：事件 另一个 localscroll      更新时间：2024-03-23

我正在尝试制作一个水平滚动布局，我需要这个布局根据它所在的页面来调整它的高度。为此，我将除正在查看的页面之外的每个"页面"div设置为显示：无，然后单击所有页面显示：块，然后所选页面保持显示：块而其余页面返回显示：无。

我试图在页面中获得滚动效果，以便在它们点击后，页面都显示出来：块，它滚动到选定的页面，然后将其他页面设置为显示：无。。但是在为页面设置了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'); 
    }
})

非常感谢任何帮助！

您可以尝试使用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);
}

在你完成这项工作后，你可以尝试一些不显示的东西，这样你就不必滚动过其余的页面。

相关文章：