JQuery 前臺切換網站的樣式實現
2024-05-06 14:15:07
供稿：網友
但如果你想為網站添加多一些樣式，讓訪客選擇；又或者你想調整一下網站的樣式，而在決定前讓訪客先體現的話，這也是一個很好的辦法，省去總是切換主題的痛苦。
切換效果參照本站。
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,
