一，js換膚的基本原理
基本原理很簡單，就是使用 JS 切換對應的 CSS 樣式表文件。例如導航網站 Hao123 的右上方就有網頁換膚功能。除了切換 CSS 樣式表文件之外，通常的網頁換膚還需要通過 Cookie 來記錄用戶之前更換過的皮膚，這樣下次用戶訪問的時候，就可以自動使用上次用戶配置的選項。 那么基本工作流程就出來了：訪問網頁――JS 讀取 Cookie ――如果沒有，使用默認皮膚――如果有，使用指定皮膚；用戶點擊換膚選項――JS 控制替換對應的 CSS 樣式表――將皮膚選項寫進 Cookie 保存。
二，事先需要的準備工作
1，不同的皮膚對應不同的css文件，準備好多套css樣式文件：
如藍色對應：skinColour_blue.css
黃色對應：skinColour_yellow.css
2，圖片存放在不同的皮膚文件夾下：
例如，藍色對應：blue文件夾；黃色對應：yellow文件夾。
將不同皮膚顏色的圖片放在相對應的文件夾里，圖片切換原理：在換膚函數里設置img標簽的src路徑屬性來切換圖片。
三，換膚實現的過程
1，在網頁開頭引入css文件
<link href="Content/aps/skinNone.css" rel="external nofollow" rel="stylesheet" type="text/css" id="skinColour" />
2，在頁面上定義2個皮膚切換按鈕
<span class="skin-btn-blue" onclick="changeSyle('blue');" >藍色</span><span class="skin-btn-yellow" onclick="changeSyle('yellow');" >黃色</span>3，在js的代碼，通過函數觸發切換<link>標簽的css路徑，和圖片的路徑，來實現換膚
//把引入皮膚css路徑<link>標簽選出來var cssStyle = document.getElementById('skinColour');//換膚函數function changeSyle(name) {event.stopPropagation();cssStyle.href = "Content/aps/skinColour_" + name + ".css";//保存膚色名setStorage("skinName", name);//切換圖片的路徑$('.home-bReturn').attr('src', 'img/' + name + '/home_yzl_8.png');$('.home-bHome').attr('src', 'img/' + name + '/home_yzl_7.png');}//html5設置本地存儲function setStorage(sname, vul) {window.localStorage.setItem(sname, vul);}function getStorage(attr) {var str = window.localStorage.getItem(attr);return str;}//訪問本地存儲，獲取皮膚名var cssName = getStorage("skinName");//判斷是否有皮膚名，就使用獲取的皮膚名，沒有就用默認的if (cssName && cssName != null) {cssStyle.href = "Content/aps/skinColour_" + cssName + ".css";//設置圖片路徑$('.home-bReturn').attr('src', 'img/' + cssName + '/home_yzl_8.png');$('.home-bHome').attr('src', 'img/' + cssName + '/home_yzl_7.png');}else{//沒有皮膚就使用blue默認的路徑cssStyle.href = "Content/aps/skinColour_blue.css";//設置默認圖片路徑$('.home-bReturn').attr('src', 'img/blue/home_yzl_8.png');$('.home-bHome').attr('src', 'img/blue/home_yzl_7.png');}四，總結換膚遇到的問題
1，js動態生成的標簽換膚，例如jq通過字符串拼接，添加到頁面上的img圖片標簽
1)，通過本地存儲獲取皮膚名函數取到皮膚名值，判斷這個值是否有，有的話，就用取到皮膚名，沒取到值就用默認的blue藍色
//html5獲取本地存儲皮膚 var cssName2 = getStorage("skinName"); //判斷皮膚名,切換圖片路徑 var imgSrcCinema; if (cssName2 && cssName2 != null) { imgSrcCinema = cssName2; } else { imgSrcCinema = 'blue'; };2)，在js動態生成的地方寫法：通過字符串拼接，+變量來實現
var liImg = '<div class="film-vidctn3"><img class="videoimg" src="../../img/' + imgSrcCinema + '/cinema-yzl_09.png"></div>'; $("." + pos).html(liImg);2，點擊按鈕變色的效果換膚：
可以在不同的css文件里定義同名class，樣式根據不同皮膚各自另外寫。
例如：在藍色皮膚skinColour_blue.css
/*js點擊時的樣式*/.zhleftclick{ background-color: rgba(0, 201, 212, 0.5) !important;}在黃色皮膚skinColour_yellow.css
/*1,js點擊時的樣式*/.zhleftclick{ background-color: #43490f !important;}在js里添加class就可以解決不同皮膚下的點擊效果，原理是：在不同的皮膚狀態下引用的皮膚css文件不一樣來達到。
$('.icon01').off('mousedown touchstart').on('mousedown touchstart', function () { $('.icon01').removeClass('zhleftclick').addClass('zhleftclick'); })3，另外一種點擊變色效果換膚：
先通過本地存儲獲取皮膚名，再定義一個顏色變量，判斷不同的皮膚名，來改變變量的內容，來達到在不同皮膚下的點擊效果。
//html5獲取本地存儲皮膚 var cssName2 = getStorage("skinName"); //點擊變色 var colorBright; //點擊背景變亮色 if (cssName2 && cssName2 != null) { if (cssName2 == "blue") { colorBright = "rgb(226, 109, 73)"; } else if (cssName2 == "yellow") { colorBright = "#acbf04"; } else if (cssName2 == "red") { } } else { //沒有皮膚，默認是藍色blue colorBright = "rgb(226, 109, 73)"; };$("#ul input:eq(0)").attr("data-num", "1").css({ background: "" + colorBright + "" });總結
以上所述是小編給大家介紹的JavaScript實現換膚功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
