如何在刷新时进行全屏幕背景更改?
我想刷新备用图片的背景图片。如何在刷新时进行全屏幕背景更改?
我怎么能做到这一点?
Offliberty这样做。我查看了源代码,但无法弄清楚。我发现它是通过服务器端脚本完成的,我的主机确实支持这一点,并且一个名为sizzle的脚本正在为Offliberty网站提供动力,但当我查看代码时,我感到非常困惑。
如果您愿意,您也可以在客户端轻松做到这一点。在您的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替换体。
<div id=wrapper class=wrapper4>
在CSS中有20个左右的背景选项。如果你不想使用php asp或severside代码。当你试图找出如果事情是用JavaScript或服务器端代码做,你可以写这个
document.write ('<div id=wrapper class=wrapper' + Math.floor(Math.random()*21) + '>');
一个javascript,你可以做的第一件事就是关闭JavaScript完全,重新加载页面几次,看看会发生什么。
不幸的是,Offliberty默认情况下隐藏了一切,所以当没有JS时它就像一个空白屏幕。然而,内容仍然那里,所以它仍然会工作。
那些大背景图像正在应用到#wrapper
股利,当我刷新 - 即使JS关闭 - 该背景图像正在改变。
所以看起来他们使用服务器端的东西来做到这一点。
(另外,它的价值,Sizzle是一个JavaScript库,使得选择的元素变得更加容易。它并不对用户改变任何东西,它只是使开发更简单一点。)
这将是最好在服务器端做到这一点,在我看来你使用的是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
这可以使用jQuery来完成,但使用服务器端脚本最容易。你可以在服务器端使用任何东西 - PHP,ASP.NET,Perl,Python ...? – 2011-04-21 17:46:42