在一页上使用带有多个背景的jquery全屏幕背景插件

Question

对于使用锚点和散列的内容，我已经有了一个带有左右箭头的JQuery滑块，因此所有网页内容（页面）都位于一个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

我查了小提琴手这种变化到下一个背景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库使用:(

Answer 2

可以不使用Dojo Toolkit或fullscrn插件来实现。

1. 将一个img放入一个div，窗口大小，固定位置，并设置z-index：-1
2. 使用jQuery UI $ .hide（）和$ .show（）在后台滑入和滑出。使用jQuery $ .attr（）
3. 变化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>