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

【问题标题】：How can I change an image based on URL hash when using fullpage.js?使用 fullpage.js 时如何根据 URL 哈希更改图像？
【发布时间】：2015-10-14 21:13:47
【问题描述】：

我目前正在使用fullPage.js 作为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，它只会显示图像而不会显示其他任何内容。我该如何解决这个问题？

【问题讨论】：

整页插件提供afterSlideLoad、onSlideLeave等多种回调方法。利用这些将是在现有代码中实现您想要的内容的最佳方式。只需查看documentation 的示例。
保罗，你看到我的回答了吗？

标签： javascript jquery scroll fullpage.js

【解决方案1】：

正如@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 中使用 fullpage.js 添加到 body 元素的 fp-viewing-section-slide 类型的 css 类。

查看this video tutorial，它解释了如何使用它。

例如：

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

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

【讨论】：

我使用了你的 CSS 方法而不是使用回调。它很光滑，就像一个魅力。和往常一样，我把事情复杂化了。谢谢！

【解决方案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 作为参考。

【讨论】：

远非理想。使用插件回调是可行的方法。

【解决方案3】：

您正在寻找hashchange 事件 - 有documentation over at Mozilla。

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

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

您的$(document).ready() 方法的问题在于，它仅在页面加载后运行一次（实际上是在文档准备好后）。而不是以后。 url hash 的变化并没有加载任何东西，它只是把你跳到同一个文档的不同“片段”。

【讨论】：

使用 fullpage.js 功能有更好的方法。
是的，好吧，如果您认为符合标准的纯 JavaScript 解决方案可以在没有任何插件且跨浏览器的情况下运行，那么我真的无法帮助您。感谢您的反对。
他正在询问他使用 fullPage.js 的网站的特定问题。在这种情况下，您的解决方案不是方法，它不会像使用插件的回调那样灵活。
人们也可能会争辩说，您将他进一步锁定在一个库中，即使功能（在这种描述的情况下）在没有任何第三方代码的情况下很容易实现。