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

时间:2017-07-20 13:05:59

标签: javascript jquery if-statement mousewheel

这个问题已被问过很多次,但无法弄清楚为什么进展不顺利。 我正在尝试模拟滚动以获得更多灵活性,但需要有很多条件。上升或下降到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
    }
  }
});

2 个答案:

答案 0 :(得分:1)



$('body').bind('mousewheel', function(e) {
  if ($('.ecampus').css('display') == 'block') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      // TOP PAGE
    } else {
      $('.ecampus').fadeOut();
      $('.pegasebuzz').fadeIn();
      $('.notrecoin').fadeOut();
    }
  } else if ($('.pegasebuzz').css('display') == 'block') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.pegasebuzz').fadeOut();
      $('.ecampus').fadeIn();
    } else {
      $('.notrecoin').fadeOut();
      $('.pegasebuzz').fadeOut();
      $('.notrecoin').fadeIn();
    }
  } else if ($('.notrecoin').css('display') == 'block') {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      $('.ecampus').fadeOut();
      $('.notrecoin').fadeOut();
      $('.pegasebuzz').fadeIn();
    } else {}
  } else {}

});

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/1.9.1/jquery.min.js"></script>
<div class="ecampus">
  E-CAMPUS
</div>
<div class="pegasebuzz">
  PEGASEBUZZ
</div>
<div class="notrecoin">
  NOTRE COIN
</div>
&#13;
&#13;
&#13;

答案 1 :(得分: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来检查要添加的滚动值。