javascript - if else 语句中的多个 if else - 模拟滚动

Question

这个问题已被问过很多次，但无法弄清楚为什么进展不顺利。我正在尝试模拟一个卷轴以获得更多的灵 active ，但需要有很多条件。当向上或向下移动到 fadeIn 和 fadeOut div 时，我收到一个鼠标滚轮事件。它使用一个 div 但无法使用更多。

我正在 JSFiddle 上做演示

$('body').bind('mousewheel', function(e) {

  if ($('.ecampus').css('opacity') == '1') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
            // TOP PAGE
    } else {
      $('.pegasebuzz').fadeOut();
      $('.notrecoin').fadeIn();
    }
  }

  else if ($('.pegasebuzz').css('opacity') == '1') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.pegasebuzz').fadeOut();
      $('.ecampus').fadeIn();
    } else {
      $('.pegasebuzz').fadeOut();
      $('.notrecoin').fadeIn();
    }
  }

  else ($('.notrecoin').css('opacity') == '1') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.notrecoin').fadeOut();
      $('.pegasebuzz').fadeIn();
    } else {
      // BOTTOM PAGE
    }
  }
});

Answer 1

演示

var scroll=0;
$('body').bind('mousewheel', function(e) {
if(scroll<10) scroll++;
else{
  scroll=0;
  if ($('.ecampus').css('display') == 'block') {
  
    if (e.originalEvent.wheelDelta  < 0 ) {
			
      $('.ecampus').fadeOut();
      $('.pegasebuzz').fadeIn();
    } else {
      // TOP PAGE
    }
    return;
  }

  if ($('.pegasebuzz').css('display') == 'block') {
   if (e.originalEvent.wheelDelta  < 0) {
    $('.pegasebuzz').fadeOut();
     $('.notrecoin').fadeIn();
    } else {
    $('.pegasebuzz').fadeOut();
     $('.ecampus').fadeIn();
   }
   return;
  }

  if ($('.notrecoin').css('display') == 'block') {
   if (e.originalEvent.wheelDelta < 0) {
     // BOTTOM PAGE
  } else {
     
     $('.notrecoin').fadeOut();
     $('.pegasebuzz').fadeIn();
   }
   return;
 }
 
 }
});

body {
  margin: 0;
}

.ecampus {
  width: 100%;
  height: 100%;
  background: red;
  display: block;
  position: absolute;
}

.pegasebuzz {
  width: 100%;
  height: 100%;
  background: blue;
  display: none;
  position: absolute;
}

.notrecoin {
  width: 100%;
  height: 100%;
  background: yellow;
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ecampus">
  E-CAMPUS
</div>
<div class="pegasebuzz">
  PEGASEBUZZ
</div>
<div class="notrecoin">
  NOTRE COIN
</div>

在每个鼠标滚轮事件中，它都会更改 div。您可以根据您的 div 检查要添加多少滚动值。