1

使用 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 创建背景图像的经验，该图像可以正确适应不同的屏幕分辨率等。不过，我不熟悉如何为网站的每个“页面”设置不同的背景图像。我一直在考虑另一种方法可能是根据选择的菜单项触发背景图像的更改。有没有人对此事有任何经验或建议？我曾尝试堆叠图像，但我想避免在网站上的任何位置看到部分背景图像。

4

2 回答 2

1

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

因此，您将设置每个“页面”出现在页面中的路径点，并相应地更改背景图像。

于 2012-09-27T19:31:33.153 回答
0

由于很难让 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。

于 2012-09-28T18:51:42.510 回答