使用 fullpage.js 时如何根据 URL 哈希更改图像？

Question

我目前正在使用 fullPage.js for a website I'm creating。请注意，当您滚动时，它如何将散列附加到 URL（即 #feature1）。我想根据该哈希更改图像或背景图像

这是我要初始化的 <body> 标签上方 fullPage.js

    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['welcome', 'feature1', 'feature2', 'feature3', 'feature4', 'feature5', 'feature6'],
            sectionsColor: ['transparent', '#1BBC9B', '#7E8F7C', '#C63D0F', '#1BBC9B', '#7E8F7C'],
            navigation: true,
            navigationPosition: 'left',
        });
    });

我正在使用这个 javascript 来尝试更改图像，尽管我很确定 document.write 是错误的。

    $(document).ready(function() {
      // Which anchor is being used?
      switch(window.location.hash) {
         case "#feature1":
           document.write('<img class="screen" src="img/bg-feature-2.jpg">');
         break;
         case "#feature2":
           document.write('<img class="screen" src="img/bg-feature-1.jpg">');
         break;
      }
    });

如果我滚动到#feature1 或#feature2，它什么都不做。但是，如果我直接在浏览器中输入带有散列的 URL，它只会显示图像而不会显示其他任何内容。我该如何解决这个问题？

Answer 1

您正在查找 hashchange 活动 - 有 documentation over at Mozilla.

但基本上你是这样使用它的：

window.addEventListener("hashchange", function() {
  // called whenever the hash changes
  // put your switch / case here.
}, false);

您的 $(document).ready() 方法的问题在于，它仅在页面加载后运行一次（实际上，在文档准备好后）。而不是以后。 url 散列的变化并没有加载什么东西，它只是将您跳转到同一文档的不同 "fragment"。

Answer 2

您需要将您的页面绑定到 hashchange 事件：

$(function(){

  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;

    // Change the image link using the following code:
    // $(".screen").attr("src", "img/bg-feature-2.jpg");
    switch(window.location.hash) {
      case "#feature1":
        $(".screen").attr("src", "img/bg-feature-2.jpg");
        break;
      case "#feature2":
        $(".screen").attr("src", "img/bg-feature-1.jpg");
        break;
    }
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();

});

我用了The hash is blank作为参考。

Answer 3

正如@Brian Ray 所指出的，您应该使用 fullpage.js 回调。

您可以对部分使用 afterLoad 或 onLeave，对幻灯片使用 afterSlideLoad 或 onSlideLoad。

例如：

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function (anchorLink, index) {
        var loadedSection = $(this);

        //using anchorLink
        if (anchorLink == 'secondSlide') {
            alert("Section 2 ended loading");
        }
    }
});

虽然在你的情况下，我会直接在 CSS 中使用 css class 类型 fp-viewing-section-slide，fullpage.js 添加到body 元素。

查看 this video tutorial 解释如何使用它的地方。

例如：

body.fp-viewing-firstPage #myImage{
    background: url('demo.gif');
}

body.fp-viewing-secondPage #myImage{
    background: url('otherImage.gif');
}

使用 fullpage.js 时如何根据 URL 哈希更改图像？

How can I change an image based on URL hash when using fullpage.js?

javascript

jquery

scroll

fullpage.js