如何在使用fullpage.js時根據URL哈希更改圖像？

-2

我目前使用fullPage.js作爲website I'm creating。請注意，如果滾動，它會在URL上附加一個散列（例如，#feature1）。我想基於散列更改圖像和背景圖像中如何在使用fullpage.js時根據URL哈希更改圖像？

這是我上面的標籤<body>初始化我使用這個JavaScript來嘗試改變形象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', 
     }); 
    });

，雖然我很確定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直接輸入到瀏覽器中，則只顯示圖像，而不顯示其他內容。我該如何解決這個問題？

來源

2015-10-14 Paul Ruocco

的全頁插件提供了多種回調方法如'afterSlideLoad'和'onSlideLeave'。使用這些將是實現你想要的現有代碼的最佳方式。例如，查看[documentation]（https://github.com/alvarotrigo/fullPage.js/）。 –

保羅，你看到我的答案了嗎？ –

正如@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'); 
}

來源

2015-10-15 11:45:45 Alvaro

太棒了！ '：）' –

我用你的CSS方法而不是使用回調函數。它很流暢，像魅力一樣運作。一如既往，我過於複雜的事情。謝謝！ –

您正在尋找hashchange活動 - 有documentation over at Mozilla。

但基本上你使用這樣的：

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

與$(document).ready()方法的問題是，該頁面加載後，其只運行一次（實際上，一旦文檔準備好）。而不是晚些時候。 url散列的變化不會加載某些東西，它只是將您跳轉到同一文檔的不同「片段」。

來源

2015-10-14 21:16:08 amenthes

使用fullpage.js特性有更好的方法。 – Alvaro

是的，如果你考慮一個符合標準的純JavaScript解決方案，它可以在沒有任何插件和跨瀏覽器的情況下工作，那麼我真的無法幫到你。感謝downvote。 – amenthes

他正在爲使用fullPage.js的網站詢問具體問題。在這種情況下，您的解決方案不是這樣，它不會像使用插件的回調一樣靈活。 – Alvaro

你需要你的頁面綁定到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作爲參考。

來源

2015-10-14 21:19:26

遠非理想。使用插件回調是實現它的方法。 – Alvaro

如何在使用fullpage.js時根據URL哈希更改圖像？

回答

相關問題