HTML & CSS ? 主題樣式切換代碼：jQuery Theme Switcher

主題樣式切換代碼：jQuery Theme Switcher

發表于: HTML & CSS. 評論
Sponsor

是不是經?？吹接行┚W站帶有切的主題的功能？該功能可以方便用戶切換自己喜歡的樣式，讓用戶可以選擇自己喜歡的主題，是一個不錯的用戶體驗。

今天我們為大家分享一個能實現這個切換樣式特效的插件：jQuery Theme Switcher，使用它你就能方便的為你的網站定制多種不同的主題啦！

插件名稱：jQuery Theme Switcher
網站地址：http://archin-modi.github.io/Jquery-Theme-Switcher/

演示：

使用方法

STEP 1: 載入 jQuery 庫和?jQuery Theme Switcher 插件代碼

<link href=”Jquery.Theme.Switcher.css” rel=”stylesheet” />
<script src=”Jquery.Theme.Switcher.js”></script>

STEP 2: ?html代碼

把要改變樣式的代碼放在 id=“Layout_Skin” 下

<body>
  <div id=”Layout_Skin”>
    /*這里添加你的代碼…*/
  </div>
</body>

STEP 3: ?添加對應 Class 名稱，分別有改變背景和文字顏色的 Class，根據需求添加到你的HTML 標簽上。

class="Switcher" 為改變背景顏色；
class="Switcher-text" 為改變文字顏色；

STEP 4: 添加 JS 代碼，設置你對應的樣式 

$(document).ready(function () {
  $(‘body’).Archin({
    backgroundColor: “Enter Your Color”,
    TextColor: ‘Enter Your Color’,
    ButtonbackgroundColor: ‘Enter Your Color’,
    BoxBGimages: ‘image Path’
  });
});

下載代碼或具體使用方法請參考 jQuery Theme Switcher 的官方網站。

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

{ 發表評論 }