JQuery front-end switching website style implementation_javascript skills

But if you want to add more styles to the website for visitors to choose; or if you want to adjust the style of the website and let visitors reflect before making a decision, this is also a good way to avoid having to switch themes all the time. pain.
Refer to this site for the switching effect.
1. Switch style button code:

Copy code The code is as follows:

< ;div id="style-switch">

• Day


• Night li>
  

Please place the above button code according to your website design. For example, in my case, it is placed in the header.php file.
2. Style reference code:

Copy code The code is as follows:

php if($_COOKIE['style'] == 'black') : ?>





< ;?php endif; ?>

Here I will briefly explain:
Because a cookie record "style" will be written in the cookie part of the browser in the following js code, So here I will let the browser call the style according to the record (here are two styles, one "white" and the other "black").
When the browser has a cookie record of "style" and records it as "black", it will first read the black.css file, which can be said to be the main style file; and then read the auxiliary style (that is, for needs Toggle style), white.css.
If the browser does not have any "style" style cookie record, or the "style" style cookie record is "white", the theme will first read the white.css file, and then read the black.css file.
What needs to be added here is that using PHP to read cookies will be more effective than using js to read cookies. Because I originally used js to read cookies, but since it still takes a while to load js, the page browsing after switching styles is not perfect. If you have previously found that after selecting a black theme and then browsing the page, there will be a white theme for a moment, and then a black theme. This is what I want to explain. Now using PHP code this shortcoming no longer exists.
3. Javascript part of the code: (Note that you have already called the JQuery library in the website)

Copy code Code As follows:

(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function() {
$('body').append('

');
$('#overlay')
.css({
display: 'none',
position: 'absolute',
top:0,
left: 0,
width: '100%',
height: '2000%',
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('style', styleName, 365);
}
})(jQuery);

The above part is the click action part. I added a section of #overlay block style in the middle to create a lightbox effect during the switching process, which will be more natural than a sudden switch.
Then you also need to add the function code that generates cookie records:

Copy the code The code is as follows:

function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date. getTime() (days*24*60*60*1000));
var expires = "; expires=" date.toGMTString();
}
else var expires = "";
document.cookie = name "=" value expires "; path=/";
}

There is also a function code to add and delete cookie records:

Copy code The code is as follows:

function eraseCookie(name)
{
createCookie(name,"",-1) ;
}

That’s it, just complete the above three parts. I hope everyone can understand.