實現換皮膚效果的javascript代碼

 

 

 

這三個節點的預設皮膚是三種顏色，每個節點可以獨立換膚，而且互不影響。某個節點的皮膚一旦更換，這個節點下的列表頁和內容頁的皮膚也會跟隨著一起更換。這個換膚實現的方法如下:

 

分析原始碼可以發現幾個要點

 

1， 首先網頁頂部要載入四個檔案：

這裡的重點在於要給CSS檔案ID，還有預設的皮膚路徑，換膚的原理就是通過更換檔案夾路徑讀取不同的CSS和圖片從而達到換膚的效果。

 

 

2，

這裡是切換皮膚的按鈕地區的結構代碼

 

3， 最後在頁面裡插入以下代碼：

代碼如下

複製代碼

<script language="javascript" type="text/javascript">          (function(e,d,c){var b=["#css_zwp"];var a=function(g){var f=$(b[0]).attr("href").split("/")[$(b[0]).attr("href").split("/").length-2];$.each(b,function(h){if($(b[h]).size()!=0){$(b[h]).attr("href",$(b[h]).attr("href").replace(f,g.find("a").attr("rel")))}})};if($.cookie(d)==null){$(e).each(function(f){var g=$(b[0]).attr("href").split("/")[$(b[0]).attr("href").split("/").length-2];if($(this).find("a").attr("rel")==g){$(this).parent().children().removeClass(c).eq(f).addClass(c)}})}else{a($(e).eq($.cookie(d)));$(e).removeClass(c).eq($.cookie(d)).addClass(c)}$(e).click(function(g){a($(this));var h=$(this).parent().children();var f=$.inArray(this,h);$.cookie(d,f,{path:"/",expires:new Date(new Date().getTime() 24*3600*100)});h.removeClass(c).eq(f).addClass(c);g.stopPropagation()})})(".theme li","theme2","cur");          (function(e,d,c){var b=["#css_zw"];var a=function(g){var f=$(b[0]).attr("href").split("/")[$(b[0]).attr("href").split("/").length-2];$.each(b,function(h){if($(b[h]).size()!=0){$(b[h]).attr("href",$(b[h]).attr("href").replace(f,g.find("a").attr("rel")))}})};if($.cookie(d)==null){$(e).each(function(f){var g=$(b[0]).attr("href").split("/")[$(b[0]).attr("href").split("/").length-2];if($(this).find("a").attr("rel")==g){$(this).parent().children().removeClass(c).eq(f).addClass(c)}})}else{a($(e).eq($.cookie(d)));$(e).removeClass(c).eq($.cookie(d)).addClass(c)}$(e).click(function(g){a($(this));var h=$(this).parent().children();var f=$.inArray(this,h);$.cookie(d,f,{path:"/",expires:new Date(new Date().getTime() 24*3600*100)});h.removeClass(c).eq(f).addClass(c);g.stopPropagation()})})(".theme li","theme2","cur"); </script>

這裡要注意的是ID要與載入CSS的ID對應上。

 

在每個頁面都加上以上三點就可以實現聯動換膚，最後怎麼實現節點之前互不影響的換膚，只用更改第3點中末尾處(".theme li","theme2","cur")中間的theme2這個參數。