前端+JavaScript+配色网站源码+解决设计师的配色烦恼！全自动优雅配色，你值得拥有！

共28个文件

png：17个

js：7个

css：2个

javascript

期末作业

简单配置

前端作业

需积分: 5 63 浏览量 2022-07-28 18:49:32 上传评论收藏 179KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

配色网.zip （28个子文件）

配色网

css

nav.css 1KB

default.css 18KB

img

wheel2.png 6KB

sv_slider_alpha.png 15KB

ddarrow.png 224B

model.png 8KB

wheel4.png 6KB

dot1.png 381B

dot2.png 381B

wheel3.png 6KB

wheel1.png 6KB

dot4.png 363B

ui.png 5KB

wheel_bkgr.png 9KB

logo.png 8KB

warning.png 293B

shop.png 6KB

c_slider.png 11KB

dot3.png 373B

index.html 6KB

colorschemedesigner.js 177KB

jquery.floatbox.js 6KB

jquery-1.4.2.min.js 71KB

tooltips.js 10KB

jquery.styledselect.js 2KB

jquery.tooltip.js 8KB

jquery.droppy.js 2KB

info.json 11KB

<!DOCTYPE html><html lang="zh_cn"><head><meta charset="utf-8"> <title>在线配色</title> <link rel="stylesheet" href="css/default.css" type="text/css"> <link rel="stylesheet" href="css/nav.css"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.styledselect.js"></script> <script type="text/javascript" src="js/jquery.floatbox.js"></script> <script type="text/javascript" src="js/jquery.tooltip.js"></script> <script type="text/javascript" src="js/jquery.droppy.js"></script> <script type="text/javascript" src="js/colorschemedesigner.js"></script> <script type="text/javascript" src="js/tooltips.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.nav a.close').click(function() { $(document.body).addClass('nav-none'); }); }) </script> <style> .cp {line-height:2em;} .cp a {text-decoration:none;padding-bottom:1px;border-bottom:1px dotted #555} </style> </head> <body> <div id="csd3-jscheck"> <h1>在线配色</h1> <div id="csd3-load"> <h4>专业在线配色工具</h4> <hr> </div> </div> <script type="text/javascript">  </script> <div id="csd3-canvas" style="display:none"> <div id="csd3-model-cover"></div> <div id="csd3-pane-wheel" class="pane"></div> <div id="csd3-pane-vars" class="pane"> <div class="tabs" id="csd3-tabs-csv"></div> <div id="csd3-c1-cover"></div> <div id="csd3-c2-cover"></div> </div> <div id="csd3-pane-info" class="pane"></div> <div class="tabs" id="csd3-tabs-color"></div> <table id="csd3-palette"><tbody><tr> <td class="cbox bg-pri-0"></td> <td class="cbox bg-sec1-0"></td> <td class="cbox bg-sec2-0"></td> <td class="cbox bg-compl-0"></td> </tr></tbody></table> <h4 id="csd3-schemeid">方案 ID: <a href="#" target="_blank"></a></h4> <div id="csd3-preview-palette-canvas"> <div id="csd3-preview-palette-bg1"></div> <div id="csd3-preview-palette-bg2"></div> <table id="csd3-preview-palette"> <tbody><tr class="pri"> <td class="cbox bg-pri-3" rel="pri-3"></td> <td class="cbox bg-pri-0" rel="pri-0" rowspan="2"></td> <td class="cbox bg-pri-1" rel="pri-1"></td> </tr> <tr class="pri"> <td class="cbox bg-pri-4" rel="pri-4"></td> <td class="cbox bg-pri-2" rel="pri-2"></td> </tr> <tr class="sec sec1"> <td class="cbox bg-sec1-1" rel="sec1-1"></td> <td class="cbox bg-sec1-0" rel="sec1-0" rowspan="2"></td> <td class="cbox bg-sec1-3" rel="sec1-3"></td> </tr> <tr class="sec sec1"> <td class="cbox bg-sec1-2" rel="sec1-2"></td> <td class="cbox bg-sec1-4" rel="sec1-4"></td> </tr> <tr class="sec sec2"> <td class="cbox bg-sec2-1" rel="sec2-1"></td> <td class="cbox bg-sec2-0" rel="sec2-0" rowspan="2"></td> <td class="cbox bg-sec2-3" rel="sec2-3"></td> </tr> <tr class="sec sec2"> <td class="cbox bg-sec2-2" rel="sec2-2"></td> <td class="cbox bg-sec2-4" rel="sec2-4"></td> </tr> <tr class="compl"> <td class="cbox bg-compl-1" rel="compl-1"></td> <td class="cbox bg-compl-0" rel="compl-0" rowspan="2"></td> <td class="cbox bg-compl-3" rel="compl-3"></td> </tr> <tr class="compl"> <td class="cbox bg-compl-2" rel="compl-2"></td> <td class="cbox bg-compl-4" rel="compl-4"></td> </tr> </tbody></table> </div> <div class="tabs" id="csd3-tabs-preview"></div> <div id="csd3-showtext"> <a id="csd3-showtext-btn" href="#">显示示例文本</a> </div> <ul id="csd3-menu" class=""> <li><a href="#" id="csd3-menu-undo" class="">复原</a></li> <li><a href="#" id="csd3-menu-redo" class="">重做</a></li> <li><a id="csd3-menu-random" href="#">随机</a> <ul> <li><a href="#" id="csd3-menu-random-now">随机调色板</a></li> <li><a href="#" id="csd3-menu-random-set">随机设置...</a></li> </ul> </li> <li><a href="#" id="csd3-menu-vision">色盲</a> <ul id="csd3-submenu-vision"> </ul> </li> <li><a href="#" id="csd3-menu-convert">色彩空间</a> <ul id="csd3-submenu-convert"> <li><a id="csd3-menu-convert-0" class="sel" href="#">RGB颜色（默认）</a></li> <li class="sep"><hr></li> <li><a id="csd3-menu-convert-1" href="#">Web颜色</a></li>   <li><a id="csd3-menu-convert-4" href="#">Opaltone® 颜色</a></li> </ul> </li> <li><a id="csd3-menu-export" href="#">导出</a> <ul>    <li><a id="csd3-menu-export-aco" href="#">ACO (Photoshop调色板)</a></li>  </ul> </li> <li><a href="#" id="csd3-menu-help">帮助</a> <ul> <li><a href="#" id="csd3-menu-tooltips">显示提示</a></li> <li class="sep"><hr></li> <li><a href="https://blog.csdn.net/igg08?spm=1010.2135.3001.5421" id="csd3-menu-about">关于...</a></li> </ul> </li> </ul> <form id="csd3-form"><input id="csd3-form-data" type="hidden" name="data"></form> <div id="csd3-relatedlinks">  <a href="#"></a>   <a href="#"></a> <a href="#"></a>  </div>  </div> <span class="none"><script src="https://blog.csdn.net/igg08?spm=1010.2135.3001.5421" language="JavaScript"></script></span> </body></html>