我正在尝试更改向下滚动时的背景图像 - 像这样 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');
}
});
});
最佳答案
您可以使用标志或计数器来检查背景是否应更改。 我制作了类似于您提到的页面(JsFiddle)。
在代码中,我将内容分为 4 部分,并使用 fadeIn
和 fadeOut
进行内容之间的过渡。
也许这就是您想要的。
关于javascript - 更改鼠标滚轮上的背景图像(向下滚动)。向上滚动时将图像更改回来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37877360/