Question

使用JQuery ScrollTo插件，我创建了以下垂直网站LINK。基本页面架构如下：

<div id="fixed-menu">
     <!-- MAIN MENU FIXED TO TOP OF WINDOW -->
</div>

<div id="wrapper">
     <div id="mask">
          <div id="page1">
             <!-- PAGE 1 CONTENT -->
          </div>
          <div id="page2">
             <!-- PAGE 2 CONTENT -->
          </div>
          <div id="page3">
             <!-- PAGE 3 CONTENT -->
          </div>
          <div id="page4">
             <!-- PAGE 4 CONTENT -->
          </div>
     </div>
</div>

我的问题是尝试为每个单独的“页面”设置全屏背景图像。我有使用JQuery插件Fullscreenr来创建适当地适应不同屏幕分辨率等的背景图像的经验。但是，我不熟悉如何为网站的每个“页面”设置不同的一个。我一直在想，另一种选择可能是根据选择的菜单项触发背景图像的更改。有没有人对此事有任何经验或建议？我曾尝试堆叠图像，但我想避免在网站上的任何一点看到部分背景图像。

Answer 1

看一下Jquery的航点。基本上，这可以让您在网站滚动到某个点时执行javascript事件。 http://imakewebthings.com/jquery-waypoints/

因此，您可以设置一个方向点，让您的每个“页面”出现在页面中，并相应地更改背景图像。

Answer 2

很难让JQuery Waypoints成功运行，我最后只需在鼠标点击相关标题后更改背景图像。因为该站点只是自动滚动（没有鼠标滚轮功能），所以这样可以正常工作。

使用的JQuery代码如下：

<script type="text/javascript">
$(function() {
    $('a.panel-about').click(function(){
    $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg2.jpg");
    return false;
    });
});
</script>

因此，当点击类'panel-about'的链接时，背景图像将从html中指定的现有bg1.jpg更改为bg2.jpg。

垂直站点上的多个全屏背景图像

2 个答案: