但如果你想為網(wǎng)站添加多一些樣式，讓訪客選擇；又或者你想調(diào)整一下網(wǎng)站的樣式，而在決定前讓訪客先體現(xiàn)的話，這也是一個很好的辦法，省去總是切換主題的痛苦。
切換效果參照本站。
1. 切換樣式的按鈕代碼：

上面的按鈕代碼請根據(jù)你的網(wǎng)站設計放置。比如在我這里是放到header.php文件中的。
2. 樣式引用代碼：

在這里我簡單說明一下：
因為在后面的js代碼中會于瀏覽器的cookie部分寫入一個cookie記錄“style”，所以在這里我會讓瀏覽器根據(jù)記錄進行樣式的調(diào)用（這里為兩個樣式，一個“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的加載還是需要那么一點時間，所以在切換樣式后的頁面瀏覽中并不完美。如果你以前發(fā)現(xiàn)選擇黑色主題后，再瀏覽頁面，會出現(xiàn)先是一瞬間的白色主題，然后才是黑色主題的現(xiàn)象。這就是我要說明的情況了?，F(xiàn)在使用PHP代碼則不再存在這個不足。
3. Javascript部分代碼：（注意前提是你已經(jīng)在網(wǎng)站中調(diào)用了JQuery庫）

上面的部分是點擊動作部分。我在中間添加了一段#overlay的塊樣式是為了在切換過程中制作一個燈箱效果，這樣會比突然的切換來得更為自然。
然后還需要添加產(chǎn)生cookie記錄的功能代碼：

還有添加刪除cookie記錄的功能代碼：

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

最新評論