Whenever a major festival, the homepage of major mainstream websites will wear festivals. Designers generally use large background pictures to obtain a better visual impact effect. Of course, considering that some users are not used to this big background map, Then it is necessary to place the "Close" button on the background chart. Users only need to click the "Close Background" button, and the large background chart will disappear.
We use JavaScript to control the display and hiding background pictures. When clicking the closure button, control the CSS to make the page not load the background map. If the background map is loaded, if the cookie fails, the background picture will be re -loaded.
Html
The closing button of the general background picture is placed on the head of the page. We place the closing background button on the top of the page. Of course, this button is a good picture.
Copy code code as follows:
<div ID = "Top">
<em ID = "close_btn"> </em>
</div>
CSS
You also need to prepare a large background picture. We find a large background picture from the Internet and use CSS to make a simple page layout.
Copy code code as follows:
*{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; posity: absolute; right: 0; bottom: 25px; cursor: pointer;
display: block; z-index: 2;}
After deploying the CSS, the page has no effect. We need to use JavaScript to load background pictures.
Javascript
When the first loading page (at this time there is no cookie, etc.), of course, the background picture must be loaded to display the complete page effect. When we click the "Close" button, at this time JavaScript will kill the background pictures that have been loaded on the page, that is, not displayed, and set cookies, control the big background picture through the expiration time of the cookie. That is, when the page is refreshing, if the cookie is not expired, the big background picture will not be loaded, and the big background picture will be loaded, please see the code:
Copy code code as follows:
$ (function () {
ifTCookie ("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 diagram by setting the CSS background Background property of the page element, and read and set the cookies through the two custom functions of GetCookie () and SetCookie ().
Copy code code as follows:
// Set cookie
Function setCookie (name, value) {
var exp = new date ();
exp.settime (exp.gettime () + 1*60*60*60*1000); //
document.cookie = name + "=" + escape (value) + "; expires =" + exp.togmtring ();
}
// Take the cookies function
Function getCookie (name) {
var anrr = document.cookie.match (new regexp ("(" (^|) "+name+" = ([^;]*) (; | $) "))));
if (Arr! = NULL) Return Unescape (ARR [2]); Return Null;
}