Question

我正在使用一个html文件构建一个网站，并使用javascript操作内容。因此，某些操作会触发下一页的形成。在这种情况下，我目前在每个“页面”的底部都有一个按钮，它链接到下一个我试图将这些相同的函数集成到一个可以滚动的switch语句中。但是，我不能让这个工作。我也试图放入一个else if语句，滚动小于0，jquery加载上一个窗口。

var currentView = 'pageOne';
var display = $('.pageOne').css('display');
if (display == 'block') {
   changePageOne();
}
var display2 = $('.pageTwo').css('display');
if (display2 == 'block') {
   changePageTwo();
}
    $(window).scroll(function(){
    if($(window).scrollTop() > 0){
      switch(currentView){
         case 'pageOne':
         changePageOne();
         break;
         case "pageTwo":
         changePageTwo();
         break;
         case "pageThree":
         changePageThree();
      }
     }
});


function changePageOne(){
           $('.fadeInRight').toggleClass("fadeOutLeft").toggleClass("fadeInRight");
           $('.fadeInLeft').toggleClass("fadeOutRight").toggleClass("fadeInLeft");
           $('.fadeInUp').toggleClass("fadeOutDown").toggleClass("fadeInUp");
           $('.fadeInDown').toggleClass("fadeOutUp").toggleClass("fadeInDown");
           setTimeout(function() {
           $('.slideOutRight').toggleClass("slideInLeft").toggleClass("slideOutRight");
           $('.slideOutLeft').toggleClass("slideInRight").toggleClass("slideOutLeft");
           $('.slideOutUp').toggleClass("slideInDown").toggleClass("slideOutUp");
           $('.slideOutDown').toggleClass("slideInUp").toggleClass("slideOutDown");
           $('.pageTwo').css("display", "block");
           }, 300);
           setTimeout(function() {
               $('.pageOne').css("display", "none");
           }, 300);
           currentView = "pageOne";
};

 function changePageTwo(){
           $('.slideInRight').toggleClass("slideOutRight").toggleClass('slideInRight');
           $('.slideInLeft').toggleClass("slideOutLeft").toggleClass('slideInLeft');
           $('.slideInUp').toggleClass("slideOutDown").toggleClass('slideInUp');
           $('.slideInDown').toggleClass("slideOutUp").toggleClass('slideInDown');
           $('.fadeOutRight').toggleClass("fadeInRight").toggleClass('fadeOutRight');
           $('.fadeOutLeft').toggleClass("fadeInLeft").toggleClass('fadeOutLeft');
           $('.fadeOutDown').toggleClass("fadeInDown").toggleClass('fadeOutDown');
           $('.fadeOutUp').toggleClass("fadeInUp").toggleClass('fadeOutUp');
           $('.pageThree').css("display", "block");
           setTimeout(function() {
               $('.pageTwo').css("display", "none");
            }, 300);
           currentView = "pageTwo";
};

 function changePageThree(){
           $('.fadeInRight').toggleClass("fadeOutLeft").toggleClass("fadeInRight");
           $('.fadeInLeft').toggleClass("fadeOutRight").toggleClass("fadeInLeft");
           $('.fadeInUp').toggleClass("fadeOutDown").toggleClass("fadeInUp");
           $('.fadeInDown').toggleClass("fadeOutUp").toggleClass("fadeInDown");
           setTimeout(function() {
           $('.slideOutRight').toggleClass("slideInLeft").toggleClass("slideOutRight");
           $('.slideOutLeft').toggleClass("slideInRight").toggleClass("slideOutLeft");
           $('.slideOutUp').toggleClass("slideInDown").toggleClass("slideOutUp");
           $('.slideOutDown').toggleClass("slideInUp").toggleClass("slideOutDown");
           $('.pageThree').css("display", "block");
           }, 300);
           setTimeout(function() {
               $('.pageTwo').css("display", "none");
           }, 300);
           currentView = "pageThree";
};

Answer 1

我在下面的方法中提供了代码中的一些更改。使用https://stackoverflow.com/a/14193343/3709922此答案，您可以跟踪滚动事件，并使用以下方法，您可以更改页面。希望它有所帮助。

function changePageOne(){
       $('.fadeInRight').toggleClass("fadeOutLeft").toggleClass("fadeInRight");
       $('.fadeInLeft').toggleClass("fadeOutRight").toggleClass("fadeInLeft");
       $('.fadeInUp').toggleClass("fadeOutDown").toggleClass("fadeInUp");
       $('.fadeInDown').toggleClass("fadeOutUp").toggleClass("fadeInDown");
       setTimeout(function() {
       $('.slideOutRight').toggleClass("slideInLeft").toggleClass("slideOutRight");
       $('.slideOutLeft').toggleClass("slideInRight").toggleClass("slideOutLeft");
       $('.slideOutUp').toggleClass("slideInDown").toggleClass("slideOutUp");
       $('.slideOutDown').toggleClass("slideInUp").toggleClass("slideOutDown");
       $('.pageTwo').css("display", "block");
       }, 300);
       setTimeout(function() {
           $('.pageOne').css("display", "none");
       }, 300);
       currentView = "pageTwo"; // changed to pageTwo
}

function changePageTwo(){
       $('.slideInRight').toggleClass("slideOutRight").toggleClass('slideInRight');
       $('.slideInLeft').toggleClass("slideOutLeft").toggleClass('slideInLeft');
       $('.slideInUp').toggleClass("slideOutDown").toggleClass('slideInUp');
       $('.slideInDown').toggleClass("slideOutUp").toggleClass('slideInDown');
       $('.fadeOutRight').toggleClass("fadeInRight").toggleClass('fadeOutRight');
       $('.fadeOutLeft').toggleClass("fadeInLeft").toggleClass('fadeOutLeft');
       $('.fadeOutDown').toggleClass("fadeInDown").toggleClass('fadeOutDown');
       $('.fadeOutUp').toggleClass("fadeInUp").toggleClass('fadeOutUp');
       $('.pageThree').css("display", "block");
       setTimeout(function() {
           $('.pageTwo').css("display", "none");
        }, 300);
       currentView = "pageThree"; // changed to pageThree
}

function changePageThree(){
       $('.fadeInRight').toggleClass("fadeOutLeft").toggleClass("fadeInRight");
       $('.fadeInLeft').toggleClass("fadeOutRight").toggleClass("fadeInLeft");
       $('.fadeInUp').toggleClass("fadeOutDown").toggleClass("fadeInUp");
       $('.fadeInDown').toggleClass("fadeOutUp").toggleClass("fadeInDown");
       setTimeout(function() {
       $('.slideOutRight').toggleClass("slideInLeft").toggleClass("slideOutRight");
       $('.slideOutLeft').toggleClass("slideInRight").toggleClass("slideOutLeft");
       $('.slideOutUp').toggleClass("slideInDown").toggleClass("slideOutUp");
       $('.slideOutDown').toggleClass("slideInUp").toggleClass("slideOutDown");
       $('.pageFour').css("display", "block");
       }, 300);
       setTimeout(function() {
           $('.pageThree').css("display", "none");
       }, 300);
       currentView = "pageFour"; // changed to pageFour
}

修改上述方法仅有助于按正向顺序转换，即从1到2以及从2到3等等。对于向后转换，您必须创建与这些方法相同的其他方法，但只需更改currentView顺序和

$('.pageTwo').css("display", "block");

setTimeout(function() { $('.pageOne').css("display", "none"); }, 300);

这些行以反向（向后）顺序移动并检查滚动条件，如果用户向后或向前滚动以分别向前转换。

功能工作.click但不是.scroll

1 个答案: