During major festivals, the homepages of major mainstream websites will be decorated with festive costumes. Designers generally use large background images to obtain better visual impact effects. Of course, it is also necessary to consider that some users are not used to this large background image, so it is necessary to place the "Close" button on the background image. As long as the user clicks the "Close Background" button, the large background image will disappear.
We use javascript to control the display and hiding of background images. When clicking the close button, we control CSS to prevent the page from loading the background image. At the same time, we record COOKIE-related parameters and set the validity period of the cookie. Then refresh the page during the validity period of the cookie and will not load the background image. If the cookie is invalid, the background image will be reloaded.
HTML
Generally, the close button for background pictures is placed at the head of the page. We place a button for closing the background at the top of the page. Of course, this button is a prepared picture.
<div >
<em title="Close Background"></em>
</div>
CSS
We also need to prepare a large background picture. We will find a large background picture online to use it and use CSS to make a simple page layout.
*{margin:0; padding:0}
body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"\5b8b\4f53", sans-serif;}
#top{clear:both;width:1000px;height:60px;margin:0 auto;overflow:hidden;position:relative;}
#close_btn{width:60px;height:20px;position:absolute;right:0;bottom:25px;cursor:pointer;
display:block;z-index:2;}
After deploying the CSS, the page has no effect yet. We need to use javascript to load the background image.
Javascript
When the page is loaded for the first time (there is no cookie set, etc.), of course, the background image must be loaded to display the complete page effect. When we click the "Close" button, Javascript will kill the background image that has been loaded on the page, that is, it will not display it, and set a cookie to control whether the large background image is displayed through the expiration time of the cookie. That is, when the page is refreshed next time, if the cookie has not expired, the large background image will not be loaded. Otherwise, the large background image will be loaded. Please see the code:
$(function(){
if(getCookie("mainbg")==0){
$("body,html").css("background","none");
$("#close_btn").hide();
}else{
$("body").css("background","url(images/body_bg.jpg)) no-repeat 50% 0");
$("html").css("background","url(images/html_bg.jpg) repeat-x 0 0");
$("#close_btn").show().css("background","url(images/close_btn.jpg) no-repeat");
}
//Click to close
$("#close_btn").click(function(){
$("body,html").css("background","none");
$("#close_btn").hide();
setCookie("mainbg","0");
});
})
Obviously, we control the loading of the background image by setting the CSS background background attribute of the page element, and read and set cookies through two custom functions: getCookie() and setCookie().
//Set cookies
function setCookie(name,value){
var exp = new Date();
(() + 1*60*60*1000);//Expiration period is 1 hour
= name + "="+ escape (value) + ";expires=" + ();
}
//Get the cookies function
function getCookie(name){
var arr = (new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}