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