Question

我想在刷新时制作this web page替代照片的背景图像。

我怎么能做到这一点？

Offliberty这样做。我查看了源代码，但无法弄明白。我发现它是用服务器端脚本完成的，而我的主机确实支持它，并且一个名为sizzle的脚本正在为Offliberty网站提供支持，但是当我查看代码时我感到很困惑。

Answer 1

如果您愿意，也可以在客户端轻松完成此操作。在你的css中创建多个类：

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'); }

然后在你的jQuery ready函数中：

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

如果需要，用div的#id替换body。

Answer 2

最好在服务器端执行此操作，在我看来，您使用的是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

Answer 3

当您尝试查找是否使用JavaScript或服务器端代码完成某些操作时，您可以做的第一件事就是完全关闭JavaScript，重新加载页面几次，看看会发生什么。

不幸的是，Offliberty默认情况下一切都是隐形的，所以当没有JS时它看起来就像一个空白屏幕。但是，内容仍然是那里，所以它仍然有效。

那些大背景图像正在应用于#wrapper div，当我刷新时 - 即使关闭JS - 背景图像也在变化。

所以看起来他们正在使用服务器端的东西来做这件事。

（另外，对于它的价值，Sizzle是一个JavaScript库，它使选择元素变得更加容易。它不会改变用户的任何内容，只会使开发变得更简单。）

Answer 4

<div id=wrapper class=wrapper4>在css中找到了20个左右的背景选项。如果你不想使用php asp或severside代码。你可以为此写一个javascript

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

如何在刷新时更改全屏背景？

4 个答案: