網(wǎng)頁換膚的實(shí)質(zhì)就是切換CSS樣式,關(guān)鍵是給用戶做出點(diǎn)擊切換的功能以及換膚完成之后的緩存記錄功能,下面我們就來看一下使用jQuery實(shí)現(xiàn)Web頁面換膚功能的要點(diǎn)解析:

網(wǎng)頁換膚是一門老技術(shù)了，老的現(xiàn)在都不怎么流行了。但是，有時(shí)候有些客戶就是想要這個(gè)換膚功能。于是就實(shí)踐做了一下網(wǎng)頁換膚，結(jié)果遇到了很多問題。

網(wǎng)頁換膚的基本原理

基本原理很簡單，就是使用 JS 切換對應(yīng)的 CSS 樣式表。例如導(dǎo)航網(wǎng)站 Hao123 的右上方就有網(wǎng)頁換膚功能。除了切換 CSS 樣式表文件之外，通常的網(wǎng)頁換膚還需要通過 Cookie 來記錄用戶之前更換過的皮膚，這樣下次用戶訪問的時(shí)候，就可以自動(dòng)使用上次用戶配置的選項(xiàng)。

那么基本工作流程就出來了：訪問網(wǎng)頁——JS 讀取 Cookie ——如果沒有，使用默認(rèn)皮膚——如果有，使用指定皮膚；用戶點(diǎn)擊換膚選項(xiàng)——JS 控制替換對應(yīng)的 CSS 樣式表——將皮膚選項(xiàng)寫進(jìn) Cookie 保存。

網(wǎng)頁換膚事先需要的準(zhǔn)備

首先你可能要準(zhǔn)備多套 CSS 樣式表文件，當(dāng)點(diǎn)擊換膚按鈕的是，使用 JS 來切換對應(yīng)的 CSS 樣式表。之后，就是在網(wǎng)頁上增加一個(gè) ul li 列表，用 CSS 修飾一下做成換膚選項(xiàng)。例如：

下面我們就來看具體功能代碼。

實(shí)現(xiàn)點(diǎn)擊切換對應(yīng) CSS 功能

首先，我們的皮膚選項(xiàng)的 HTML 結(jié)構(gòu)是這樣的

<div class=”skin”>

  <ul>

    <li class=”skin1 hover”></li>

    <li class=”skin2”></li>

    <li class=”skin3”></li>

    <li class=”skin4”></li>

  </ul>

</div>

然后在網(wǎng)頁的頂部偏下的位置放上一個(gè)空的 link 標(biāo)簽，我們將會使用 jQuery 為這個(gè) link 標(biāo)簽賦予不同的 CSS 文件實(shí)現(xiàn)切換效果

復(fù)制代碼 代碼如下:

<link rel=”stylesheet” href=”” data-href=”style-Teal.css” type=”text/css” media=”screen” class=”skincsslittle” />

其中，我自定義了一個(gè) data-href 屬性來存放系統(tǒng)默認(rèn)的皮膚，這樣當(dāng)頁面加載完成之后，如果 JS 沒有檢測到 Cookie 中的皮膚信息，就會把 data-href 中的內(nèi)容賦值上去。之后就是大家熟悉的 jQuery 代碼：

jQuery(‘.skin li').click(function(){

  var currentClass = jQuery(this).attr(‘class');

  jQuery(this).siblings().removeClass(‘hover');

  jQuery(this).addClass(‘hover');

  var cc = currentClass.substring(0,5);

  cc = convertcsslittle(cc);

  var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + cc;

  jQuery(‘.skincsslittle').attr(“href”,skincssurl);

createCookie('skin',currentClass,365);

});

大體的邏輯就是獲取到當(dāng)前皮膚的 class 然后截取出來 skin* 然后通過一個(gè)函數(shù)得到其對應(yīng)的 CSS 文件。skincssurl 記載的是網(wǎng)頁的非皮膚 CSS 文件，主要用來獲取當(dāng)前網(wǎng)頁的 CSS 目錄 URL ，最后將混合好的 CSS 皮膚文件賦值準(zhǔn)備好的空 link 中，實(shí)現(xiàn)換膚。

增加 Cookie 記錄皮膚功能

這里主要用到兩個(gè)自定義的函數(shù)，用來創(chuàng)建、讀取 Cookie 內(nèi)容。

function readCookie(name) {

 var nameEQ = name + “=”;

 var ca = document.cookie.split(‘;');

 for(var i=0;i < ca.length;i++) {

  var c = ca[i];

  while (c.charAt(0)==' ‘) c = c.substring(1,c.length);

  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

 }

 return false;

}

function createCookie(name,value,days) {

if (days) {

var date = new Date();

date.setTime(date.getTime()+(days2460601000));

var expires = “; expires=”+date.toGMTString();

}

else expires = “”;

document.cookie = name+”=”+value+expires+”; path=/“;

}

你只需要把這兩個(gè)函數(shù)復(fù)制到 JS 代碼區(qū)域即可。在 jQuery 點(diǎn)擊換膚的功能代碼中，最后一句就創(chuàng)建了一個(gè) Cookie，等網(wǎng)頁加載完成之后，我們需要使用 JS 讀取 Cookie 內(nèi)容，然后使用 if 判斷：

var cccc = readCookie(“skin”);

if (cccc){

cccc = cccc.substring(0,5);

jQuery(‘.'+cccc).addClass(‘hover').siblings().removeClass(‘hover');

ccc = convertcsslittle(cccc);

var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + ccc;

jQuery(‘.skincsslittle').attr(“href”,skincssurl);

}else{

var currentcss = jQuery(‘.skincsslittle').attr(“data-href”);

var currentcssname = currentcss.substring(currentcss.indexOf(‘style'),currentcss.length);

currentcssname = defaulttoclass(currentcssname);

jQuery(‘.'+currentcssname).addClass(‘hover').siblings().removeClass(‘hover');

jQuery(‘.skincsslittle').attr(“href”,jQuery(‘.skincsslittle').attr(“data-href”));

}

不要被這么亂的代碼嚇暈了，實(shí)際上邏輯很簡單，先獲取 Cookie 的皮膚值，如果有就為對應(yīng)的皮膚選項(xiàng)高亮并且轉(zhuǎn)換得到對應(yīng)的 CSS 皮膚文件賦值。如果沒有 Cookie 內(nèi)容，就將 data-href 屬性中記錄的值賦值進(jìn)去。

網(wǎng)頁換膚的閃爍問題和不完美解決方案

網(wǎng)頁換膚中，會遇到閃爍的問題。就是當(dāng)點(diǎn)擊切換按鈕的時(shí)候，更換顏色或者圖片會閃爍一下?；蛘呤褂?Cookie 記錄之后，用戶使用了非默認(rèn)的皮膚，也會閃爍一下，先出現(xiàn)默認(rèn)的樣式然后再閃爍切換成用戶自己選擇的樣式。

這種影響用戶體驗(yàn)的現(xiàn)象肯定要徹底消滅，但是一直沒有找到完美的解決方法。因?yàn)闉g覽器默認(rèn)的是優(yōu)先渲染 CSS 之后再加載 JS，特別是使用 Cookie 記錄的皮膚，先渲染現(xiàn)有的 CSS 之后，JS 才能讀取然后切換到皮膚。原理是這樣的，跟客戶協(xié)商之后，客戶給出了一個(gè)“無閃爍”的換膚效果示例，是 MG12 很早的一款主題。同樣的 Cookie 記錄等，但是他的作品確實(shí)沒有閃爍情況。

于是我就查看了他的 JS 代碼，沒有發(fā)現(xiàn)特殊之處，后來才想明白，這種閃爍問題，在圖片比較多的網(wǎng)頁中效果尤其明顯，因?yàn)榍袚Q的 CSS 需要加載圖片需要更多時(shí)間。而 MG12 那款主題中，切換的 CSS 文件只是改變了幾個(gè) background 顏色，加載速度快到你眼球反應(yīng)不過來就造成了不閃爍的假象。

不完美解決方案也是有的，點(diǎn)擊切換按鈕之后的閃爍情況，也是因?yàn)橐虞d圖片等，那么我們可以在訪問網(wǎng)頁的時(shí)候，使用預(yù)加載技術(shù)將其他皮膚圖片預(yù)加載或者使用 CSS Sprite 技術(shù)做成一張大圖片。

至于 Cookie 記錄閃爍的問題，這是瀏覽器渲染的硬傷，只能盡量減少換膚需要改變的地方，盡量壓縮圖片減小體積。然后優(yōu)先加載沒有任何皮膚的基礎(chǔ)樣式，之后使用 JS 加載默認(rèn)樣式或者讀取 Cookie 獲取的皮膚選項(xiàng)。這樣處理，訪問網(wǎng)頁的時(shí)候會先顯示白色或者無顏色，之后直接切換成之前選擇的皮膚的顏色，而不會從默認(rèn)的顏色閃爍變成另一種顏色從而提升一定的用戶體驗(yàn)。