JQuery 前台切换网站的样式实现

但如果你想为网站添加多一些样式，让访客选择；又或者你想调整一下网站的样式，而在决定前让访客先体现的话，这也是一个很好的办法，省去总是切换主题的痛苦。
切换效果参照本站。
1. 切换样式的按钮代码：

<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>

上面的按钮代码请根据你的网站设计放置。比如在我这里是放到header.php文件中的。
2. 样式引用代码：

<?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; ?>

在这里我简单说明一下：
因为在后面的js代码中会于浏览器的cookie部分写入一个cookie记录“style”，所以在这里我会让浏览器根据记录进行样式的调用（这里为两个样式，一个“white”，另一个“black”）。
当浏览器存在“style”的cookie记录，并记录为“black”时候，则先读取black.css文件，这可以说是主样式文件；及后再读取辅助样式（就是供需要切换的样式），white.css。
如果浏览器没有任何“style”的样式cookie记录，或者“style”的样式cookie记录为“white”时候，则主题先读取white.css文件，再读取black.css文件。
在这里需要补充的是，使用PHP的cookie读取会比使用js的cookie读取更为有效。因为我原来是利用js进行cookie的读取动作，但由于js的加载还是需要那么一点时间，所以在切换样式后的页面浏览中并不完美。如果你以前发现选择黑色主题后，再浏览页面，会出现先是一瞬间的白色主题，然后才是黑色主题的现象。这就是我要说明的情况了。现在使用PHP代码则不再存在这个不足。
3. Javascript部分代码：（注意前提是你已经在网站中调用了JQuery库）

(function($) 
{ 
$(document).ready(function() { 
$('.styleswitch').click(function() { 
$('body').append('<div id="overlay" />'); 
$('#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);

上面的部分是点击动作部分。我在中间添加了一段#overlay的块样式是为了在切换过程中制作一个灯箱效果，这样会比突然的切换来得更为自然。
然后还需要添加产生cookie记录的功能代码：

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=/"; 
}

还有添加删除cookie记录的功能代码：

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

到此，完成上面三部后就可以了，希望大家看得明白。