JavaScript實(shí)現(xiàn)換膚功能的方法

這篇文章主要介紹JavaScript實(shí)現(xiàn)換膚功能的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一，js換膚的基本原理

基本原理很簡(jiǎn)單，就是使用 JS 切換對(duì)應(yīng)的 CSS 樣式表文件。例如導(dǎo)航網(wǎng)站 Hao123 的右上方就有網(wǎng)頁(yè)換膚功能。除了切換 CSS 樣式表文件之外，通常的網(wǎng)頁(yè)換膚還需要通過(guò) Cookie 來(lái)記錄用戶之前更換過(guò)的皮膚，這樣下次用戶訪問(wèn)的時(shí)候，就可以自動(dòng)使用上次用戶配置的選項(xiàng)。 那么基本工作流程就出來(lái)了：訪問(wèn)網(wǎng)頁(yè)——JS 讀取 Cookie ——如果沒有，使用默認(rèn)皮膚——如果有，使用指定皮膚；用戶點(diǎn)擊換膚選項(xiàng)——JS 控制替換對(duì)應(yīng)的 CSS 樣式表——將皮膚選項(xiàng)寫進(jìn) Cookie 保存。

二，事先需要的準(zhǔn)備工作

1，不同的皮膚對(duì)應(yīng)不同的css文件，準(zhǔn)備好多套css樣式文件：

如藍(lán)色對(duì)應(yīng)：skinColour_blue.css

黃色對(duì)應(yīng)：skinColour_yellow.css

2，圖片存放在不同的皮膚文件夾下：

例如，藍(lán)色對(duì)應(yīng)：blue文件夾；黃色對(duì)應(yīng)：yellow文件夾。

將不同皮膚顏色的圖片放在相對(duì)應(yīng)的文件夾里，圖片切換原理：在換膚函數(shù)里設(shè)置img標(biāo)簽的src路徑屬性來(lái)切換圖片。

三，換膚實(shí)現(xiàn)的過(guò)程

1，在網(wǎng)頁(yè)開頭引入css文件

<link href="Content/aps/skinNone.css" rel="external nofollow" rel="stylesheet" type="text/css" id="skinColour" />

2，在頁(yè)面上定義2個(gè)皮膚切換按鈕

<span class="skin-btn-blue" onclick="changeSyle('blue');" >藍(lán)色</span>
<span class="skin-btn-yellow" onclick="changeSyle('yellow');" >黃色</span>

3，在js的代碼，通過(guò)函數(shù)觸發(fā)切換<link>標(biāo)簽的css路徑，和圖片的路徑，來(lái)實(shí)現(xiàn)換膚

//把引入皮膚css路徑<link>標(biāo)簽選出來(lái)
var cssStyle = document.getElementById('skinColour');
//換膚函數(shù)
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設(shè)置本地存儲(chǔ)
function setStorage(sname, vul) {
window.localStorage.setItem(sname, vul);
}
function getStorage(attr) {
var str = window.localStorage.getItem(attr);
return str;
}
//訪問(wèn)本地存儲(chǔ)，獲取皮膚名
var cssName = getStorage("skinName");
//判斷是否有皮膚名，就使用獲取的皮膚名，沒有就用默認(rèn)的
if (cssName && cssName != null) {
cssStyle.href = "Content/aps/skinColour_" + cssName + ".css";
//設(shè)置圖片路徑
$('.home-bReturn').attr('src', 'img/' + cssName + '/home_yzl_8.png');
$('.home-bHome').attr('src', 'img/' + cssName + '/home_yzl_7.png');
}else{
//沒有皮膚就使用blue默認(rèn)的路徑
cssStyle.href = "Content/aps/skinColour_blue.css";
//設(shè)置默認(rèn)圖片路徑
$('.home-bReturn').attr('src', 'img/blue/home_yzl_8.png');
$('.home-bHome').attr('src', 'img/blue/home_yzl_7.png');
}

四，總結(jié)換膚遇到的問(wèn)題

1，js動(dòng)態(tài)生成的標(biāo)簽換膚，例如jq通過(guò)字符串拼接，添加到頁(yè)面上的img圖片標(biāo)簽

1)，通過(guò)本地存儲(chǔ)獲取皮膚名函數(shù)取到皮膚名值，判斷這個(gè)值是否有，有的話，就用取到皮膚名，沒取到值就用默認(rèn)的blue藍(lán)色

//html5獲取本地存儲(chǔ)皮膚
  var cssName2 = getStorage("skinName");
  //判斷皮膚名,切換圖片路徑
  var imgSrcCinema;
  if (cssName2 && cssName2 != null) {
    imgSrcCinema = cssName2;
  } else {
    imgSrcCinema = 'blue';
  };

2)，在js動(dòng)態(tài)生成的地方寫法：通過(guò)字符串拼接，+變量來(lái)實(shí)現(xiàn)

   var liImg = '<div class="film-vidctn3"><img class="videoimg" src="../../img/' + imgSrcCinema + '/cinema-yzl_09.png"></div>';
    $("." + pos).html(liImg);

 2，點(diǎn)擊按鈕變色的效果換膚：

可以在不同的css文件里定義同名class，樣式根據(jù)不同皮膚各自另外寫。

例如：在藍(lán)色皮膚skinColour_blue.css

/*js點(diǎn)擊時(shí)的樣式*/
.zhleftclick{
  background-color: rgba(0, 201, 212, 0.5) !important;
}

在黃色皮膚skinColour_yellow.css

/*1,js點(diǎn)擊時(shí)的樣式*/
.zhleftclick{
  background-color: #43490f !important;
}

在js里添加class就可以解決不同皮膚下的點(diǎn)擊效果，原理是：在不同的皮膚狀態(tài)下引用的皮膚css文件不一樣來(lái)達(dá)到。

 $('.icon01').off('mousedown touchstart').on('mousedown touchstart', function () {
      $('.icon01').removeClass('zhleftclick').addClass('zhleftclick');
  })

3，另外一種點(diǎn)擊變色效果換膚：

先通過(guò)本地存儲(chǔ)獲取皮膚名，再定義一個(gè)顏色變量，判斷不同的皮膚名，來(lái)改變變量的內(nèi)容，來(lái)達(dá)到在不同皮膚下的點(diǎn)擊效果。

  //html5獲取本地存儲(chǔ)皮膚
  var cssName2 = getStorage("skinName");
  //點(diǎn)擊變色
  var colorBright; //點(diǎn)擊背景變亮色
  if (cssName2 && cssName2 != null) {    
    if (cssName2 == "blue") {
      colorBright = "rgb(226, 109, 73)";
    } else if (cssName2 == "yellow") {
      colorBright = "#acbf04";
    } else if (cssName2 == "red") {
    }
  } else {
    //沒有皮膚，默認(rèn)是藍(lán)色blue
    colorBright = "rgb(226, 109, 73)";
  };
$("#ul input:eq(0)").attr("data-num", "1").css({ background: "" + colorBright + "" });

以上是“JavaScript實(shí)現(xiàn)換膚功能的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！