在一頁上使用帶有多個背景的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>