单一网页上的淡入淡出/更改背景

我有一段时间搞清楚如何做到这一点 - 我很惊讶这不是整个网络中更常见的事件，尽管我离题了。单一网页上的淡入淡出/更改背景

我正在建立一个小型网站，我试图保留在一个页面上 - 最终该网站将存在于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

单一网页上的淡入淡出/更改背景

回答

相关问题