JQuery foreground switch website style implementation

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.