在一个页面上使用具有多个背景的 Jquery 全屏背景插件

Question

我已经有一个带有左右箭头的 Jquery 滑块，用于使用锚点和散列的内容，因此所有 Web 内容（页面）都在一个 html 页面上。我需要有全屏背景，并且我使用 CSS 得到了一些工作，但它没有显示整个图像并添加了不可接受的垂直滚动条，该版本在这里： ilandeistudio.com

所以我正在尝试使用 Jquery 的不同方法： http://code.ttcon.hu/fullscrn/#!/instructions

我可以让它工作，但我不知道如何让它与滑块/多个背景一起工作。说明说您可以稍后更改背景，只需调用 setImage 方法：

fullScr.setImage("images/bg_about1.jpg");

我不确定如何执行此操作或它应该去哪里。我在这里做了一个测试页： http://www.ilandeistudio.com/index06.html

当您单击右箭头时，我希望它像在 ilandeistudio.com 发布的第一个链接上那样更改为下一个背景

Answer 1

无需使用 dojo 工具包或 fullscrn 插件即可完成。

1. 将 img 放入 div，按窗口大小，固定位置，并设置 z-index:-1
2. 使用 jQuery UI $.hide() 和 $.show() 在背景中滑入和滑出。
3. 使用 jQuery $.attr() 更改 img src

例子：

<script>
$(function() {
    i=0;j=0;
    $("#sin").click(function(event) {
        if (i = i ? 0 : 1) $("#bgimg").show("slide", { direction: "right" }, 1000);
        else $("#bgimg").hide("slide", { direction: "right" }, 1000);
    });
    $("#changebg").click(function(event) {
        bgs = ['http://www.google.com/images/srpr/logo3w.png', 'http://col.stc.s-msn.com/br/sc/i/icons/BING_websearch_2.jpg'];
        $("#bgimg").attr('src', bgs[j = j ? 0 : 1]);
    });
});
</script>
<style>
#bg{z-index:-1;position:fixed;top:0;left:0;height:100%;width:100%;}
#bgimg{height:100%;width:100%;}
</style>
<button id="sin">Slide</button><button id="changebg">Change bg</button>

<div id="bg"><img src="http://www.google.com/images/srpr/logo3w.png" id="bgimg" /></div>

Answer 2

我检查了这个 html 的提琴手。

http://dl.dropbox.com/u/14028956/index06.html.txt

<script type="text/javascript">
dojo.require("dojo.NodeList-manipulate");
dojo.require("ttcon.fullscrn");
dojo.ready(function() {
    var fullScr = new ttcon.fullscrn({
      image: "images/bg_home1.jpg"
    });
    dojo.query(".special-anchor").onclick(function(){
      if(/home/.test(location.hash)){
        fullScr.setImage("images/bg_home1.jpg");
        return;
      }
      if(/about/.test(location.hash)){
        fullScr.setImage("images/bg_about1.jpg");
        return;
      }
    });
});
</script>

阅读参考和文档。

• http://code.ttcon.hu/fullscrn/#!/instructions
• https://github.com/tcsizmadia/fullscrn
• http://dojotoolkit.org/api/1.7/dojo/NodeList

为什么要用这么多 JavaScript 库:(