[英]Multiple if else inside if else statements - Simulate a scroll
The question has been asked a lot of times but can't figure why isn't going well. 这个问题已经被问过很多次了,但无法弄清楚为什么进展不顺利。 I'm trying to simulate a scroll to have more flexibilities but need to had many conditions.
我正在尝试模拟滚动条以具有更大的灵活性,但需要具有许多条件。 I get a mousewheel event when going up or down to fadeIn and fadeOut
div
. 当向上或向下滚动到fadeIn和fadeOut
div
时,我得到一个鼠标滚轮事件。 It is working with one div
but can't make it with more. 它可以与一个
div
一起使用,但不能与更多的一起使用。
I'm making a demo on JSFiddle 我正在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
}
}
});
$('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>
DEMO DEMO
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>
On every mousewheel event it changes the div. 在每个鼠标滚轮事件中,它都会更改div。 you can check how much scroll value you want to add according to your div.
您可以根据自己的div检查要添加多少滚动值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.