jQuery配色方案转换器

Question

我看过很多网站都包含一个颜色切换器,用户可以通过它选择/选择任何颜色,整个页面也会相应改变.以下是几个示例链接....

   http://csmthemes.com/themes/beta/static/
   http://magna-themes.com/demos/html/flatapp/index.htm
   http://envato.nestolab.com/Batekh/style-1/image-slider-version/index-one-page.html
   http://ronseta.com/Roof/index_02.html

我想要的是:我想要相同的配色方案,但问题是我是自己创建它的专家,所以我想要基本的逻辑和一些代码开始,我有JavaScript和jQuery的基本知识.如果有任何与之相关的免费插件,那么请分享链接,或者分享一些代码,我可以通过它开始构建我自己的插件.

Answer 1

关注" http://magna-themes.com/demos/html/flatapp/index.htm "

0.按颜色创建多个css文件

style/colors/default.css
style/colors/green.css
style/colors/red.css
style/colors/pink.css

1.你创建了一个带有像彩色切换器这样的id的css链接

<link rel="stylesheet" type="text/css" href="style/colors/default.css" id="color-switcher">

2.你创建一个颜色选择器菜单

<div id="demo-wrapper">
      <h2>COLORS:</h2>
      <ul>
          <li class="green" data-path="style/colors/green.css"></li>
          <li class="red" data-path="style/colors/red.css"></li>
          <li class="pink" data-path="style/colors/pink.css"></li>
      </ul>
      <div class="clear"></div>

      <p data-path="style/colors/default.css">Restore Default Scheme</p>

 </div>

3.您使用javascript更改链接的路径

$('#demo-wrapper ul li').on('click', function(){
     var path = $(this).data('path');
     $('#color-switcher').attr('href', path);
});