如何在刷新時進行全屏幕背景更改？

我怎麼能做到這一點？

Offliberty這樣做。我查看了源代碼，但無法弄清楚。我發現它是通過服務器端腳本完成的，我的主機確實支持這一點，並且一個名爲sizzle的腳本正在爲Offliberty網站提供動力，但當我查看代碼時，我感到非常困惑。

2011-04-21 Toren

這可以使用jQuery來完成，但使用服務器端腳本最容易。你可以在服務器端使用任何東西 - PHP，ASP.NET，Perl，Python ...？ – 2011-04-21 17:46:42

如果您願意，您也可以在客戶端輕鬆做到這一點。在您的jQuery的準備功能

backgr0 { background-image: url('images/somepic.jpg'); } 
backgr1 { background-image: url('images/somepic.jpg'); } 
backgr2 { background-image: url('images/somepic.jpg'); } 
backgr3 { background-image: url('images/somepic.jpg'); } 
backgr4 { background-image: url('images/somepic.jpg'); }

然後：在你的CSS創建多個班級

$(function(){ 
    var backnum = Math.floor(Math.random()*5); 
    $('body').addClass("backgr" + backnum); 
});

如果需要用一個div的#ID替換體。

來源

2011-04-21 17:47:11 DarthJDG

-1

<div id=wrapper class=wrapper4>在CSS中有20個左右的背景選項。如果你不想使用php asp或severside代碼。當你試圖找出如果事情是用JavaScript或服務器端代碼做，你可以寫這個

document.write ('<div id=wrapper class=wrapper' + Math.floor(Math.random()*21) + '>');

來源

2011-04-21 17:53:34 Ekim

一個javascript，你可以做的第一件事就是關閉JavaScript完全，重新加載頁面幾次，看看會發生什麼。

不幸的是，Offliberty默認情況下隱藏了一切，所以當沒有JS時它就像一個空白屏幕。然而，內容仍然那裏，所以它仍然會工作。

那些大背景圖像正在應用到#wrapper股利，當我刷新 - 即使JS關閉 - 該背景圖像正在改變。

所以看起來他們使用服務器端的東西來做到這一點。

（另外，它的價值，Sizzle是一個JavaScript庫，使得選擇的元素變得更加容易。它並不對用戶改變任何東西，它只是使開發更簡單一點。）

來源

2011-04-21 17:58:03 sdleihssirhc

這將是最好在服務器端做到這一點，在我看來你使用的是PHP，所以我給你一個使用該語言的例子。後臺圖像僅在重新加載時纔會更改，因此邏輯上應該在客戶端從服務器接收的HTML中進行區別。

您應該使用與@DarthJDG爲您提供的相同的CSS類。唯一的區別是您將在服務器上附加這些類，而不是在客戶端上。

$number_of_classes=7; //the number of background images you have 
$which_one=rand(0, $number_of_classes-1); //let's choose a class 

printf('<body class="backgr%s">', $which_one); //put this wherever you are printing body

來源

2011-04-22 06:34:29 kapa

非常感謝。我kiinda瞭解php而不是jquery，它基本上什麼都沒有，但在哪裏exaclty我把最上面的兩行？ – Toren 2011-04-22 17:44:32

@Toren無論你在哪裏輸出你的身體標籤。例如，如果你有'echo'';'用我的代碼替換它。 – kapa 2011-04-22 17:49:06

非常感謝！我不知道爲什麼我不試試。:) – Toren 2011-04-22 17:54:34

如何在刷新時進行全屏幕背景更改？

回答

相關問題