Question

我正在尝试使用鼠标滚轮滚动/滚动时更改页面的背景图像。某事like this page here。

我有三个不同的背景图像我希望改变（即当用户向上滚动时递增，当用户向上滚动时递增）。

See jsfiddle here（实际上并没有像希望的那样工作）。

请参阅下面的代码。

我希望我很清楚我想要实现的目标。如果没有，请告诉我，我可以提供进一步的信息。

CSS

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

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

.home{
  background: url("http://cdn3-www.wrestlezone.com/assets/uploads/gallery/ric-flair/gettyimages-93353438.jpg") center center no-repeat;
  background-size: cover;
}

.brett {
  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;
}

.hulk{
background: url("https://tse3.mm.bing.net/th?id=OIP.M44755b5d2bade01af176621c77ebe279o2&pid=15.1&P=0&w=300&h=300") center center no-repeat;
  background-size: cover;
}

HTML

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

JS

var pages = ['home','brett','hulk'];
var page = 0;

$(document).ready(function(){

    $('.bgImage').on('mousewheel', function (e) {
        if (e.deltaY>0) {
            page += 1;
            if(page >= pages.length){
                return;
            }else{
                jQuery('.bgImage').addClass(pages[page]);
            }
        } else {
            page -= 1;
            jQuery('.bgImage').removeClass(pages[page]);
        }
        e.preventDefault();
    });
});

Answer 1

我可以告诉你，你可能需要一个更强大的滚动框架来模仿你链接的网站。请尝试查看scrollmagic.io，了解有关如何执行此操作的建议。一种看待它的方法是你实际上是捕捉滚动并将它们应用到时间线＆＃34;事件，如果你愿意的话。

为了让你的例子有效，请看看这个小提琴：

https://jsfiddle.net/1nrL5gv1/20/

我添加的一件重要事情是在应用新类之前删除所有现有类。这样，只会显示最新的图像，您不必担心css特异性/顺序。

function cleanUpBg() { for(i = 0; i < pages.length; i++) { bgEl.removeClass(pages[i]); } }

我还添加了超时，因此您实际上可以一次触发一次图像更改。同样，我强烈建议您查看现有的滚动库，因为它们可以让您更快地进入这样的项目。

使用鼠标滚轮插件更改背景图像

1 个答案: