How do I make a full screen background change on refresh?
I want to make the background image of this web page alternate pictures on refresh.
How could I accomplish this?
Offliberty does this. I've looked at the source code but can't 开发者_开发技巧quite figure it out. I found out that it's done with server side scripting and my host does support that, and that a script called sizzle is powering the Offliberty website but I'm just so confused when I look at the code.
You could easily do this on the client side as well if you want. Create multiple classes in your 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'); }
Then in your jQuery ready function:
$(function(){
var backnum = Math.floor(Math.random()*5);
$('body').addClass("backgr" + backnum);
});
Replace body with an #id of a div if needed.
It would be best to do this on the server side, it seems to me you're using PHP, so I give you an example in that language. The background-image changes only on reload, so logically the difference should be in the HTML the client receives from the server.
You should use the same CSS classes that @DarthJDG has provided for you. The only difference is that you will attach the classes on the server, and not on the client side.
$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
When you're trying to find out if something is done with JavaScript or server-side code, the first thing you can do is turn off JavaScript entirely, reload the page a few times, and see what happens.
Unfortunately, Offliberty has everything invisible by default, so it just looks like a blank screen when there's no JS. However, the content is all still there, so it'll still work.
Those big background images are being applied to the #wrapper div, and when I refreshed - even with JS turned off - that background image was changing.
So it looks like they're using server-side stuff to do it.
(Also, for what it's worth, Sizzle is a JavaScript library that makes selecting elements much easier. It doesn't change anything for the user, it just makes development a little simpler.)
<div id=wrapper class=wrapper4> there are 20 or so background options found in the css. If you dont want to use php asp or severside code. you can write a javascript for this
document.write ( '<div id=wrapper class=wrapper' + Math.floor(Math.random()*21) + '>');
加载中,请稍侯......
精彩评论