Use javascript to control cookie display and hide background images

Source: Internet
Author: User
Tags set cookie

During major holidays, the homepage of major websites will be dressed in holiday costumes. Designers generally use large background images to achieve better visual impact. Of course, consider that some users are not used to this large background image. Therefore, it is necessary to place the "close" button on the background image. If you click "Close background", the large background image will disappear.

We use javascript to control the display and hiding of background images. When you click the close button, control CSS so that the page does not load background images, record COOKIE-related parameters, and set the cookie validity period, when the page is refreshed within the cookie validity period, the background image is no longer loaded. If the cookie is invalid, the background image is reloaded.

HTML

Generally, the close button of the background image is placed in the header of the page. We place the close background button on the top of the page. Of course, this button is a good image.

Copy codeThe Code is as follows:
<Div id = "top">
<Em id = "close_btn" title = "Close background"> </em>
</Div>

CSS

You also need to prepare a large background image. We can find a large background image on the Internet and use CSS for simple page layout.

 Copy codeThe Code is 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; position: absolute; right: 0; bottom: 25px; cursor: pointer;
Display: block; z-index: 2 ;}

After the css is deployed, the page has no effect. We need to use javascript to load the background image.
Javascript
When loading the page for the first time (no cookie is set yet), of course, you must load the background image to display the complete page effect. When we click "close", Javascript will erase the background image that has been loaded on the page, that is, it will not be displayed, and set the cookie, the cookie expiration time is used to control whether the large background image is displayed. That is, if the cookie does not expire when you refresh the page next time, the large background image is not loaded. Otherwise, the large background image is loaded. See the Code:

 Copy codeThe Code is as follows:
$ (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 Close
$ ("# Close_btn"). click (function (){
$ ("Body, html" ).css ("background", "none ");
$ ("# Close_btn"). hide ();
SetCookie ("mainbg", "0 ");
});
})

Obviously, we control the loading of background images by setting the CSS background attribute of page elements, and read and set cookies through getCookie () and setCookie.

 Copy codeThe Code is as follows:
// Set cookie
Function setCookie (name, value ){
Var exp = new Date ();
Exp. setTime (exp. getTime () + 1*60*60*1000); // valid for 1 hour
Document. cookie = name + "=" + escape (value) + "; expires =" + exp. toGMTString ();
}
// Cookies Function
Function getCookie (name ){
Var arr = document. cookie. match (new RegExp ("(^ |)" + name + "= ([^;] *) (; | $ )"));
If (arr! = Null) return unescape (arr [2]); return null;
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.