Question

我试图在向下滚动时更改背景图片 - 类似于此webpage

我可以在向下滚动时更改图像，但由于它多次更改，因此无法控制。我想让它在向下滚动时改变一次。然后当我向上滚动时，我希望它只改回一次。但是，当您will see here at this jsfiddle向上或向下滚动时，它会多次更改。理想情况下，我还想使用数组中的索引来更改图像，但是想先解决有关scrollldown / scrollup的原始问题。

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进行内容之间的转换。可能这就是你想要的。

在鼠标滚轮上更改背景图像（向下滚动）。滚动时更改图像

1 个答案: