JQuery foreground switch website style implementation

Source: Internet
Author: User

However, if you want to add more styles for the website to allow visitors to choose from, or if you want to adjust the style of the website and let the visitor reflect it before making a decision, this is also a good way to save the trouble of switching themes.
For the switching effect, refer to this site.
1. Code of the switch style button:
Copy codeThe Code is as follows:
<Div id = "style-switch">
<Ul>
<Li> <a href = "#? Style = white "rel =" white "class =" styleswitch white "> Day </a> </li>
<Li> <a href = "#? Style = black "rel =" black "class =" styleswitch black "> Night </a> </li>
</Ul>
</Div>

The above button code should be placed according to your website design. For example, I put it in the header. php file.
2. style reference code:
Copy codeThe Code is as follows:
<? Php if ($ _ COOKIE ['style'] = 'black'):?>
<Link rel = "stylesheet" type = "text/css" href = "<? Php bloginfo ('template _ url');?> /Black.css "title =" black "media =" screen "/>
<Link rel = "alternate stylesheet" type = "text/css" href = "<? Php bloginfo ('template _ url');?> /White.css "title =" white "media =" screen "/>
<? Php else:?>
<Link rel = "stylesheet" type = "text/css" href = "<? Php bloginfo ('template _ url');?> /White.css "title =" white "media =" screen "/>
<Link rel = "alternate stylesheet" type = "text/css" href = "<? Php bloginfo ('template _ url');?> /Black.css "title =" black "media =" screen "/>
<? Php endif;?>

Here I will briefly describe:
Because in the subsequent js Code, a cookie record "style" will be written in the cookie section of the browser, so here I will ask the browser to call the style based on the record (here there are two styles, one "white" and the other "black ").
.
Hosts file.
It should be added that the use of PHP cookies for reading is more effective than the use of js cookies for reading. Because I used to use js for cookie reading, but it still takes a little time to load js, it is not perfect in page browsing after switching the style. If you have previously discovered that when you select a black topic and then browse the page, a white topic appears for an instant, and then a black topic appears. This is what I want to explain. PHP code is no longer used.
3. Some Javascript code: (Note that you have already called the JQuery library on your website)
Copy codeThe Code is as follows:
(Function ($)
{
$ (Document). ready (function (){
$ ('. Styleswitch'). click (function (){
$ ('Body'). append ('<div id = "overlay"/> ');
$ ('# Overlay ')
. Css ({
Display: 'none ',
Position: 'absolute ',
Top: 0,
Left: 0,
Width: '200 ',
Height: '20140901 ',
ZIndex: 1000,
Background: 'black'
})
. FadeIn (500 );
SwitchStylestyle (this. getAttribute ("rel "));
$ ('# Overlay'). fadeOut (500 );
Return false;
});
});
Function switchStylestyle (styleName)
{SetTimeout (function (){
$ ('Link [@ rel * = style] [title] '). each (function (I)
{
This. disabled = true;
If (this. getAttribute ('title') = styleName) this. disabled = false;
}) ;}, 500 );
CreateCookie ('stylename, 365 );
}
}) (JQuery );

The above section is the click action section. I added a section # overlay block style in the middle to make a lightbox effect during the switching process, which is more natural than sudden switching.
Then you need to add the code that generates the cookie record:
Copy codeThe Code is as follows:
Function createCookie (name, value, days)
{
If (days)
{
Var date = new Date ();
Date. setTime (date. getTime () + (days * 24x60*60*1000 ));
Var expires = "; expires =" + date. toGMTString ();
}
Else var expires = "";
Document. cookie = name + "=" + value + expires + "; path = /";
}

You can also add or delete a cookie record:
Copy codeThe Code is as follows:
Function eraseCookie (name)
{
CreateCookie (name, "",-1 );
}

Now, we can complete the above three parts. I hope you can understand them.

Related Article

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.