實現換皮膚效果的javascript代碼

來源:互聯網
上載者:User
 
 
 
這三個節點的預設皮膚是三種顏色,每個節點可以獨立換膚,而且互不影響。某個節點的皮膚一旦更換,這個節點下的列表頁和內容頁的皮膚也會跟隨著一起更換。這個換膚實現的方法如下:
 
分析原始碼可以發現幾個要點
 
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這個參數。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.