快捷導(dǎo)航

JavaScript實現(xiàn)換膚功能

更新時間：2017年09月15日 12:03:16 作者：云悠

js換膚功能的實現(xiàn)原理非常簡單，就是使用js切換對應(yīng)的css樣式表文件，本文重點給大家介紹JavaScript實現(xiàn)換膚功能，感興趣的朋友參考下吧

一，js換膚的基本原理

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

二，事先需要的準備工作

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

如藍色對應(yīng)：skinColour_blue.css

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

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

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

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

三，換膚實現(xiàn)的過程

1，在網(wǎng)頁開頭引入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的代碼，通過函數(shù)觸發(fā)切換<link>標簽的css路徑，和圖片的路徑，來實現(xiàn)換膚

//把引入皮膚css路徑<link>標簽選出來
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è)置本地存儲
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";
//設(shè)置圖片路徑
$('.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";
//設(shè)置默認圖片路徑
$('.home-bReturn').attr('src', 'img/blue/home_yzl_8.png');
$('.home-bHome').attr('src', 'img/blue/home_yzl_7.png');
}

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

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

1)，通過本地存儲獲取皮膚名函數(shù)取到皮膚名值，判斷這個值是否有，有的話，就用取到皮膚名，沒取到值就用默認的blue藍色

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

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

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

2，點擊按鈕變色的效果換膚：

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

例如：在藍色皮膚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就可以解決不同皮膚下的點擊效果，原理是：在不同的皮膚狀態(tài)下引用的皮膚css文件不一樣來達到。

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

3，另外一種點擊變色效果換膚：

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

  //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 + "" });

總結(jié)

以上所述是小編給大家介紹的JavaScript實現(xiàn)換膚功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: