javascript - 更改鼠标滚轮上的背景图像(向下滚动)。向上滚动时将图像更改回来

Question

我正在尝试更改向下滚动时的背景图像 - 像这样 webpage

我可以在向下滚动时更改图像，但无法控制，因为它会更改很多次。我希望它在向下滚动时只改变一次。然后当我向上滚动时，我希望它只变回来一次。然而正如你will see here at this jsfiddle当您向上或向下滚动时，它会发生多次变化。理想情况下，我还想使用数组中的索引来更改图像，但想首先解决有关向下滚动/向上滚动的原始问题。

html

<div id="test">
    <div class="bgImage"></div>
</div>

CSS

.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  z-index: 1;
}

body, html, #scene, .bgImage {
  height: 100%; 
}

.trees {
  background: url("http://2.bp.blogspot.com/-69o3lsK5MrQ/ThhlOTxGQlI/AAAAAAAAEfY/e0AJF-6sKBw/s1600/bret_hart_-_bret_hart_74.jpg") center center no-repeat;
  background-size: cover;
}

JS

var pages = ['home','urban','trees','people'];
var page = 0;

$(document).ready(function(){
    $('html').on('mousewheel', function(e){
       if(e.originalEvent.wheelDelta /120 > 0) {
          jQuery('.bgImage').addClass('trees');
       }
       else{
            jQuery('.bgImage').removeClass('trees');
       }
    });
});

Answer 1

您可以使用标志或计数器来检查背景是否应更改。我制作了类似于您提到的页面(JsFiddle)。

在代码中，我将内容分为 4 部分，并使用 fadeIn 和 fadeOut 进行内容之间的过渡。也许这就是您想要的。