js實現換膚效果

基本原理很簡單，就是使用 js 切換對應的 css 樣式表檔案。例如導航** hao123 的右上方就有網頁換膚功能。除了切換 css 樣式表檔案之外，通常的網頁換膚還需要通過 cookie 來記錄使用者之前更換過的**，這樣下次使用者訪問的時候，就可以自動使用上次使用者配置的選項。那麼基本工作流程就出來了：訪問網頁——js 讀取 cookie ——如果沒有，使用預設**——如果有，使用指定**；使用者點選換膚選項——js 控制替換對應的 css 樣式表——將**選項寫進 cookie 儲存。

1，不同的**對應不同的css檔案，準備好多套css樣式檔案：

如藍色對應：skincolour_blue.css

黃色對應：skincolour_yellow.css

例如，藍色對應：blue資料夾；黃色對應：yellow資料夾。

1，在網頁開頭引入css檔案

2，在頁面上定義2個**切換按鈕

藍色

黃色

3，在js的**，通過函式觸發切換標籤的css路徑，和的路徑，來實現換膚

//把引入**css路徑標籤選出來
var cssstyle = document.getelementbyid('skincolour');
//換膚函式
function changesyle(name) //html5設定本地儲存
function setstorage(sname, vul) function getstorage(attr) //訪問本地儲存，獲取**名
var cssname = getstorage("skinname");
//判斷是否有**名，就使用獲取的**名，沒有就用預設的
if (cssname && cssname != null) else

1，js動態生成的標籤換膚，例如jq通過字串拼接，新增到頁面上的img標籤

1)，通過本地儲存獲取**名函式取到**名值，判斷這個值是否有，有的話，就用取到**名，沒取到值就用預設的blue藍色

//html5獲取本地儲存**
var cssname2 = getstorage("skinname");
//判斷**名,切換路徑
var imgsrccinema;
if (cssname2 && cssname2 != null) else ;

2)，在js動態生成的地方寫法：通過字串拼接，+變數來實現

var liimg = '

';$("." + pos).html(liimg);

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

可以在不同的css檔案裡定義同名class，樣式根據不同**各自另外寫。

例如：在藍色**skincolour_blue.css

js點選時的樣式

*/.zhleftclick

在黃色**skincolour_yellow.css

1,js點選時的樣式

*/.zhleftclick

在js裡新增class就可以解決不同**下的點選效果，原理是：在不同的**狀態下引用的**css檔案不一樣來達到。

$('.icon01').off('mousedown touchstart').on('mousedown touchstart', function () )

js實現換膚效果

js換膚（自定義顏色）實現

js實現垂直滾動效果

js實現滑鼠拖拽效果

js實現換膚效果

js換膚（自定義顏色）實現

js實現垂直滾動效果

js實現滑鼠拖拽效果

相關推薦