jquery網頁在線配色選取器插件



221 882 295



特效描述:jquery 網頁在線配色 配色選取器 配色選取器插件,設計素材:jquery高級在線配色器插件

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/default.css" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.3.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/color.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/app_pro.js"></script>

3. HTML代碼

<div id="jscheck">
	<h1>高級在線配色工具</h1>
	<div id="load">
		<h4>你的瀏覽器需要支持javascipt&amp; CSS才能順利使用這個軟件.</h4>
		<p>你也可以使用其他工具<a href="previous">在線配色軟件</a>.</p>
		<hr>
	</div>
</div>
<script type="text/javascript">
<!--
var elm = document.getElementById('load')
if (elm) elm.innerHTML = '<p>稍等 正在裝載...<'+'p>';
//-->
</script>
<div id="canvas" style="display:none">
	<h2>版權<a href="http://www.pixy.cz/index-en.html">Petr Stanicek</a>  <a href="http://www.peise.net">配色網翻譯</a></h2>
	<table id="model"><tr>
		<td><a id="m1" class="help sel" href="#">單色搭配</a></td>
		<td><a id="m2" class="help" href="#">互補色搭配</a></td>
		<td><a id="m3" class="help" href="#">三角形搭配</a></td>
		<td><a id="m4" class="help" href="#">矩形搭配</a></td>
		<td><a id="m5" class="help" href="#">類似色搭配</a></td>
		<td><a id="m6" class="help" href="#">類似色搭配互補色</a></td>
	</tr></table>
	<div id="pane-wheel" class="pane"><div id="wheel">
		<div id="sample" class="bg-pri-0"></div>
		<div id="wh1"></div>
		<div id="wh2"></div>
		<div id="wh3"></div>
		<div id="wh4"></div>
		<img class="dot help" id="dot1" src="img/e.png">
		<img class="dot help" id="dot2" src="img/e.png">
		<img class="dot help" id="dot3" src="img/e.png">
		<img class="dot help" id="dot4" src="img/e.png">
		<div class="val help" id="hue-val">Hue: <span>0°</span></div>
		<div class="val help" id="dist-val">Angle: <span>0°</span></div>
		<table id="rgb-parts" class="help">
			<tr><th>R:</th><td id="rgb-r">100 %</td></tr>
			<tr><th>G:</th><td id="rgb-g">0 %</td></tr>
			<tr><th>B:</th><td id="rgb-b">0 %</td></tr>
		</table>
		<div class="val help" id="rgb-val">RGB: <span>FF0000</span></div>
	</div></div>
	<div id="pane-vars" class="pane">
		<div id="presets" class="help">
			預設: 
			<select></select>
		</div>
		<div id="saturation-cover">
			<h4><span id="ttl-c1">配色方案</span><span id="ttl-c2">選擇參數</span><br>飽和度/明度</h4>
			<div id="saturation"><div class="slider">
				<img class="dot help" id="dots" src="img/e.png">
				<img class="dotv" id="dotv0" src="img/e.png">
				<img class="dotv" id="dotv1" src="img/e.png">
				<img class="dotv" id="dotv2" src="img/e.png">
				<img class="dotv" id="dotv3" src="img/e.png">
				<img class="dotv" id="dotv4" src="img/e.png">
			</div></div>
		</div>
		<div id="contrast-cover">
			<div class="tabs" id="tabs-contrast">
				<a id="tab-c1" class="sel help" href="#">配色<br>對比度</a>
				<a id="tab-c2" class="help" href="#">調節<br>參數</a>
			</div>
			<div id="contrast" class="slider">
				<img class="dot help" id="dotc" src="img/e.png">
			</div>
			<div id="manualvars" class="help">
			</div>
		</div>
	</div>
	<div id="pane-info" class="pane">
		<div id="coltable"></div>
	</div>
	<div class="tabs" id="tabs-color">
		<a id="tab-wheel" class="sel help" href="#">色環</a>
		<a id="tab-vars" class="help" href="#">配色方案調節</a>
		<a id="tab-info" class="help" href="#">色彩列表</a>
	</div>
	<table id="palette" class="help"><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></table>
	<h4 id="schemeid" class="help">配色方案ID: <a href="#" target="_blank"></a></h4>
	<div id="preview-palette-canvas" class="help">
		<div id="preview-palette-bg1"></div>
		<div id="preview-palette-bg2"></div>
		<table id="preview-palette">
		<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>
		</table>
	</div>
	<div class="tabs" id="tabs-preview">
		<a id="tab-preview" class="sel help" href="#">配色預覽</a>
		<a id="tab-preview2" class="help" href="#">高明度網頁演示</a>
		<a id="tab-preview3" class="help" href="#">低明度網頁演示</a>
	</div>
	<div id="cb-warning" title="Vision simulation active"></div>
  <div id="showtext" class="help">
		<input id="chk-showtext" type="checkbox"><label for="chk-showtext">顯示文字</label>
  </div>
	<div id="fps" class="help"></div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 拖動 拖拽 拖動插件 拖拽插件 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片拖動 圖片拖拽 單選框 單選按鈕 選項卡自動切換 顏色選擇 顏色選擇器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表