
中心思想:網頁換膚的原理就是通過調用不同的樣式表文件來實現不同的皮膚切換,并且需要將換好的皮膚計入Cookie中,這樣用戶已下次訪問時,就可以顯示用戶自定義皮膚了
步驟:
1.在設計HTML代碼時,用了一些小技巧,就是將皮膚選擇按鈕<li>元素的id與網頁皮膚的樣式文件名稱設置的相同。這樣就可以使完成換膚操作簡化很多。
2.HTML結構要有一個帶id的樣式表鏈接,通過操作該鏈接的herf屬性的值,從而實現換膚
<link rel="stylesheet" href="css/skin_0.css" id="cssfile"/>
3. 根據當前的li的id,通過attr()方法為<link>元素的href屬性設置不同的值代碼如下:
var $li = $("#skin li"); $li.click(function () { $("#"+this.id).addClass("selected") .siblings().removeClass("selected"); $("#cssfile").attr("href","css/"+this.id+".css"); });4. 當單機皮膚選擇按鍵時候就可以切開皮膚了。但是當用戶刷新網頁或者關閉瀏覽起后,皮膚會被初始化,因此需要將當前選擇的皮膚進行保存(jQuery中有一款Cookie插件),它簡化了Cookie的操作。
//將皮膚保存進cookie $.cookie("myCssSkin",this.id,{path:'/',expires:10});保存后,就可以通過Cookie來獲取當前的皮膚了,如果Cookie確實存在,則將當前設置為Cookie記錄的值:
//獲取Cookie中的皮膚 var cookie_skin = $.cookie("myCssSkin"); //判斷皮膚存不存在 if (cookie_skin){ switchSkin(cookie_skin); } //設置cookid中的皮膚 function switchSkin(skinName) { $("#"+skinName).addClass("selected") .siblings().removeClass("selected"); $("#cssfile").attr("href","css/"+skinName+".css"); $.cookie("myCssSkin",skinName,{path:'/',expires:10}); }以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持武林網!
新聞熱點
疑難解答