如何使用Javascript進行自定義轉換

所以我從頭開始開發這個網站（有史以來第一次），我從我製作的psd做出了總體佈局，一切都很好，所以我現在處於我想用一些JavaScript效果函數來改進網站。如何使用Javascript進行自定義轉換

當我在索引頁面時，您有一個橫幅，邊欄和內容（文章）。當我按下文章它去的文章（很明顯），但我想在這樣一個自定義加載頁面0:22： https://www.youtube.com/watch?v=k1q6Y_snURw#t=20

我必須做或找到一個gif，但說我已經這樣做，我將如何將此添加到該網站？

這些文章都是在一個類中，雖然我想我將不得不使用每個特定文章的ID來讓它去相應的文章。

2014-10-17 Richard Lund Winther

這個問題在SO上不太合適。請閱讀這裏的指導線[幫助] - 對於一些示例代碼有一個谷歌轉換，例如，我用google flyout jquery，發現這個http://ricostacruz.com/jquery.transit/ – mplungjan 2014-10-17 12:49:59

編輯：在一個文件中彈出這一點，並在具有鏈接的每個頁面添加一個參考吧：

function loadXMLDoc(name) { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.addEventListener("load", transferComplete, false); 
    xmlhttp.open("GET", name, true); 
    document.getElementById("Loading").style.display = "block"; 
    xmlhttp.send(); 

    function transferComplete() { 
    document.write(xmlhttp.responseText); 
    history.replaceState(null, null, name); 
    } 
} 

function AJAXcallback(e) { 
    var e = window.e || e; 
    var href = e.target.getAttribute("href"); 
    if (e.target.tagName !== 'A' || href[0] == "#" || href.substring(0, 11).toUpperCase() == "JAVASCRIPT:" || e.target.class == "noloadpage") 
    return; 
    e.preventDefault(); 
    loadXMLDoc(href); 
} 
if (document.addEventListener) 
    document.addEventListener('click', AJAXcallback, false); 
else 
    document.attachEvent('onclick', AJAXcallback);

而且東西時，下一個頁面加載顯示（一定要加id爲「加載」）是這樣的：

<div id="Loading" style="display:none">Loading</div>

這使得每一個環節，是不是一個錨（#ID）或函數（JavaScript的：什麼），並沒有與AJAX的「noloadpage」類負載並顯示Loading div而loa丁。

來源

2014-10-17 14:36:38 DividedByZero

啊，好吧，我正在尋找對於某種類型的gif轉換原因，我已經看到一些頁面從加載頁面開始，所以我認爲這可能是某種轉換頁面或某種東西。 – 2014-10-17 20:55:00

@RichardLundWinther對不起，我沒有得到你，你是什麼意思的過渡頁？ – DividedByZero 2014-10-17 21:04:56

好吧，讓我們說，我在索引是頁面a，我想要去鏈接b然後而不是鏈接直接它會通過一個網頁，說加載...或類似的東西。我不確定它是如何工作的，所以我不能再具體了！ – 2014-10-18 16:12:34

如果我理解正確，你想平滑滾動文章。您可以使用動畫和scrollTop來實現此目的。

Is it possible to animate scrollTop with jQuery?

現在，你需要選擇一個選擇你的文章。

http://api.jquery.com/category/selectors/

你說，你的文章都有適當的類。所以代碼將如下所示：

$("sidebar").click(function() { 
    // "." is the selector for class and i assume the value of the sidebar match the class of article 
    $("html, body").animate({ scrollTop: $("." + $(this).val()).position().top }); 
});

希望得到這個幫助。

來源

2014-10-17 12:51:15

如何使用Javascript進行自定義轉換

回答

相關問題