單一網頁上的淡入淡出/更改背景

我有一段時間搞清楚如何做到這一點 - 我很驚訝這不是整個網絡中更常見的事件，儘管我離題了。單一網頁上的淡入淡出/更改背景

我正在建立一個小型網站，我試圖保留在一個頁面上 - 最終該網站將存在於USB上，因此應該儘可能採用獨立式（文件明智）的方式。目前，我有一個導航菜單（即第1頁，第2頁，第3頁），當您從菜單中選擇一個鏈接時，會出現該部分的新內容。我已經得到了這部分 - 或多或少 - 感謝修改後的Coda-Slider腳本（請參閱：http://codysilfies.com/orn/）。

我無法弄清的部分是，除了在點擊菜單項時更改內容之外，我還想更改背景。所以Menu_Item_1會顯示BGImage1.jpg，Menu_Item_2 - BGImage2.jpg等等。非常像這樣的東西：http://brewfestgb.com/#!/merriment - 雖然在那個頁面上有一些額外的功能......我不能真正弄清楚如何減少。有一個更簡單的方法來做到這一點。

有很多'單擊單個鏈接來更改圖像'教程 - 但沒有多個鏈接。我也嘗試使用相同的滑塊代碼作爲背景 - 但我無法將圖像的大小調整爲瀏覽器窗口的大小，並使滑塊工作（它顯然需要設置寬度 - 對於內容位可行，但不是當我想讓背景調整到瀏覽器的時候）。

任何建議......或潛在客戶？似乎有人應該知道一些事情。提前致謝！

來源

2012-04-04 Cody S

你可以改變背景圖像時，單擊處理程序被激發：

$('a.link').click(function(){ 
    // Find the image value 
    var background = 'BGImage' + $(this).data('bg') + '.jpg'; 

    // Change CSS background-image 
    $('body').css('background-image',background); 
});

您的鏈接必須是這個樣子：

<a href="path/to/link1" class="link" data-bg="1">Link 1</a> 
<a href="path/to/link2" class="link" data-bg="2">Link 2</a> 
<a href="path/to/link3" class="link" data-bg="3">Link 3</a>

來源

2012-04-04 01:47:43 hohner

你真棒。非常感謝！ – 2012-04-20 22:47:01

如果這對你有用，隨時把它標記爲接受的答案:) – hohner 2012-04-21 11:08:12

單一網頁上的淡入淡出/更改背景

回答

相關問題