经验分享程序开发文档资料数据资源其它资源

jQuery高级在线配色器插件js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery高级在线配色器插件js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery高级在线配色器插件js代码

HTML代码(index.html):

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQuery高级在线配色器插件</title>
<link rel="stylesheet" href="css/default.css" type="text/css">
<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>
</head>
<body>

<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">

	<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>
</body>
</html>

JS代码(app.js):

/** app.js - Color Scheme Designer application library* Copyright (c) 2009,Petr Stanicek,pixy@pixy.cz ("the author")* All rights reserved.** Redistribution and use in source and binary forms,with or without* modification,are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright* notice,this list of conditions and the following disclaimer.* * Redistributions in binary form must reproduce the above copyright* notice,this list of conditions and the following disclaimer in the* documentation and/or other materials provided with the distribution.* * Any commercial use of this software is not allowed unless an exemption* was granted by the author.** This software is provided by the author "as is" and any express or implied* warranties,including,but not limited to,the implied warranties or* merchantability and fitness for a particular purpose are disclaimed.* In no event shall the author be liable for any direct,indirect,incidental,* special,exemplary,or consequential damages (including,but not limited to,* procurement of substitute goods or services;
	loss of use,data,or profits;
	* or business interruption) however caused and on any theory of liability,* whether in contract,strict liability,or tort (including negligence or* otherwise) arising in any way out of the use of this software,even if* advised of the possibility of such damage.*/
// Supporting objectsvar drag ={
	on:false,dot:null}
var defs ={
	FPSlimiter:10,// msecMaxRedrawRate:200,// msecdotSize:7,// half the sizewheelMid:{
	X:190,Y:190}
,sliderMid:{
	X:95,Y:95}
,sliderWidth:140,CBPreview:0}
var API ={
	on:false}
var SchemeID;
	// INIT$(function(){
	// browser checkvar v = parseInt($.browser.version,10);
	if ($.browser.msie && v<7){
	alert('不再支持IE6内核的浏览器，你可以升级浏览器或使用其他配色器');
	document.location.href = 'http://www.peise.net';
	return;
}
$('#jscheck').hide();
	$('#canvas').fadeIn(2000);
	// event handlers$('a').click( function(){
	$(this).blur()}
);
	$('#model a').click(function(){
	setScheme(this.id);
	return false}
);
	$('#tab-wheel').click( function(){
	togglePane('wheel');
	return false}
);
	$('#tab-vars').click( function(){
	togglePane('vars');
	return false}
);
	$('#tab-info').click( function(){
	togglePane('info');
	return false}
);
	$('#wheel,#saturation,#contrast').bind('mousedown',function(e){
	e.preventDefault();
	var elm = $(this);
	var pos = elm.offset();
	drag.on = true;
	drag.dW = elm.width();
	drag.dH = elm.height();
	drag.dX = pos.left + drag.dW/2;
	drag.dY = pos.top + drag.dH/2;
	elm.bind('mousemove',function(e){
	e.preventDefault();
	dragMove(e,this);
}
);
	if (!drag.dot) dragMove(e,this);
}
).bind('mouseup',function(e){
	e.preventDefault();
	$(this).unbind('mousemove');
	drag.on = false;
	drag.dot = null;
	updateColorData();
}
);
	$('.dot').bind('mousedown',function(e){
	drag.dot = this;
}
).bind('mouseup',function(e){
	drag.dot = null;
}
);
	$('#dot1').bind('dblclick',enterHue);
	$('#hue-val').bind('click',enterHue);
	$('#dot2').bind('dblclick',enterComplHue);
	$('#dot3,#dot4').bind('dblclick',enterDist);
	$('#dist-val').bind('click',enterDist);
	$('#rgb-val').bind('click',enterRGB);
	$('#sample-val').bind('dblclick',function(e){
	var h = prompt('Enter RGB');
}
)var i,l,p,s = '<option value="">- custom -</option>';
	for (i=0,l=Palette.Presets.length;
	i<l;
	i++){
	p = Palette.Presets[i];
	s += '<option value="'+p.id+'"';
	if (i==0) s += ' selected';
	s += '>'+p.name+'</option>';
}
$('#presets select').append(s).bind('change',function(){
	usePreset(this.value);
	return false}
).styledSelect();
	$('#tab-c1').click( function(){
	toggleContrast('c1');
	return false}
);
	$('#tab-c2').click( function(){
	toggleContrast('c2');
	return false}
);
	$('#chk-showtext').click( function(){
	useShowText();
	return true}
);
	$('#tab-preview2').click( function(){
	pagePreview(1);
	return false}
);
	$('#tab-preview3').click( function(){
	pagePreview(2);
	return false}
);
	s = '';
	for (i=0,l=ColorBlind.typeDesc.length;
	i<l;
	i++){
	p = ColorBlind.typeDesc[i];
	s += '<li><a href="#" onclick="useColorBlind('+i+');
	return false">'+p+'</a></li>';
	if (i==0) s += '<li class="sep"><hr></li>';
}
$('#colorblind').html(s);
	// menu$(document).ready(function(){
	$('#menu').droppy({
	speed:100,persist:250}
);
}
);
	$('#menu a').not('.link').click( function(e){
	e.preventDefault();
	$(this).blur()}
).not('.enable a').addClass('disabled');
	$('#menu-undo').click( function(){
	History.back()}
);
	$('#menu-redo').click( function(){
	History.fwd()}
);
	$('#menu-random-now').click( function(){
	randomScheme()}
);
	$('#menu-random-set').click( function(){
	randomSettings()}
);
	$('#menu-export-txt').click( function(){
	exportCols('txt')}
);
	$('#menu-export-html').click( function(){
	exportCols('html')}
);
	$('#menu-export-xml').click( function(){
	exportCols('xml')}
);
	$('#menu-export-aco').click( function(){
	exportCols('aco')}
);
	$('#menu-export-gpl').click( function(){
	exportCols('gpl')}
);
	$('#menu-tooltips').click( function(){
	useShowTooltips()}
);
	$('#menu-about').click( function(){
	window.open(this.href);
	return false}
);
	//$('#canvas').append('<a id="shoplink" href="http://shop.colorschemedesigner.com"></a>');
	$('#canvas').append('<a id="shoplink2" href="http://www.wix.com/start/matrix?utm_campaign=ma_colorschemedesigner.com&experiment_id=ma_colorschemedesigner.com"></a>');
	// initializevar search = document.location.search.substring(1);
	if (search){
	search = search.split('&');
	var i,l,s,key,val;
	API.data ={
}
;
	for (i=0,l=search.length;
	i<l;
	i++){
	s = search[i].split('=');
	key = s[0].toString();
	val = s[1].toString();
	API.data[key] = val;
}
if (API.data.returnurl){
	API.on = true;
	if (API.data.format!='hex' && API.data.format!='rgb') API.data.format = 'hex';
	if (API.data.method!='get' && API.data.method!='post') API.data.format = 'get';
}
}
if (API.on){
	var str = decodeURIComponent(API.data.label);
	if (!str) str = 'RETURN to original site';
	$('#menu-getpro').click( function(){
	API_finish();
	return false}
).addClass('sel').html(str + ' &raquo;
	');
}
else{
	$('#menu-getpro').click( function(){
	loadPage('api');
	return false}
);
}
var hash = document.location.hash.substring(1);
	if (hash) loadScheme(hash);
	else{
	usePreset('default');
	updateScheme();
	if (Palette.UseVarsOverlay) toggleContrast('c2');
}
}
);
	function loadScheme(id){
	Palette.unserialize(id);
	$('#presets select').get(0).selectedIndex = 0;
	$('#presets select').trigger('change');
	updateScheme();
	if (Palette.UseVarsOverlay) toggleContrast('c2');
}
// APIfunction API_finish(){
	function col(c,name){
	var v,s = name+',';
	for (var i=0;
	i<5;
	i++){
	v = c.getVarRGB(i);
	if (i>0) s += ',';
	if (API.data.format=='rgb') s += v.R+'-'+v.G+'-'+v.B;
	else s += v.getHex();
}
return s;
}
function item(key,val){
	return '<input type="hidden" name="'+key+'" value="'+val+'">';
}
var str = '<form id="api-sender">';
	str += item( 'id',SchemeID );
	str += item( 'col1',col(Palette.Primary,'primary') );
	var i = 2;
	if (Palette.Sec1) str += item( 'col'+i++,col(Palette.Sec1,'secondary-a') );
	if (Palette.Sec2) str += item( 'col'+i++,col(Palette.Sec2,'secondary-b') );
	if (Palette.Compl) str += item( 'col'+i++,col(Palette.Compl,'complement') );
	str += '</form>';
	$('#canvas').append(str);
	$('#api-sender').attr('action',decodeURIComponent(API.data.returnurl)).attr('method',API.data.method);
	$('#api-sender').submit();
}
// Actionsfunction togglePane(id){
	$('.pane').hide();
	$('#pane-'+id).fadeIn(750);
	$('#tabs-color a').removeClass('sel');
	$('#tab-'+id).addClass('sel').blur();
	if (id=='wheel') updateWheel();
	else if (id=='vars'){
	updateVars();
	$('#presets select').trigger('resize');
}
else if (id=='info') updateSchemeInfo();
}
function toggleContrast(id){
	$('#tabs-contrast a').removeClass('sel');
	$('#tab-'+id).addClass('sel').blur();
	if (id=='c1'){
	Palette.resetVarsOverlay();
	$('#manualvars,#ttl-c2').hide();
	$('#contrast,#ttl-c1').fadeIn(750);
	$('#saturation .dotv').hide();
	UseManualVars = false;
}
else{
	$('#contrast,#ttl-c1').hide();
	$('#manualvars,#ttl-c2').fadeIn(750);
	$('#saturation .dotv').show();
	UseManualVars = true;
}
updateVars();
}
function setScheme(m){
	Palette.setScheme(m);
	updateScheme();
}
function usePreset(id){
	if (!id) return;
	var p = Palette.usePreset(id);
	updateVars();
}
function useColorBlind(n){
	getProVersion('Color Vision Simulation');
}
function useShowText(){
	var on = $('#chk-showtext:checked').length>0;
	var s;
	if (on) s = '<div class="text"><span class="row1">Text</span> <span class="row2">Text</span> <span class="row3">Text</span></div>';
	else s = '';
	$('#preview-palette td').html(s);
}
function useShowTooltips(){
	var on = !$('#menu-tooltips').hasClass('sel');
	if (on) showTooltips();
	else hideTooltips();
}
// Redrawvar t0;
	function checkFPS_on(){
	t0 = new Date();
}
function checkFPS_off(){
	var t1 = new Date()-t0;
	if (t1>defs.FPSlimiter) defs.FPSlimiter = t1+50;
	else if (t1<defs.FPSlimiter-50 && defs.FPSlimiter>10) defs.FPSlimiter = t1;
	$('#fps').text( 'fps:' + Math.round(1/defs.FPSlimiter*1000) );
}
function updateScheme(){
	var m = Palette.Scheme;
	$('#model a').removeClass('sel');
	$('#'+m).addClass('sel').blur();
	$('#dot2').css('display',Boolean(Palette.Compl) ? 'block':'none');
	$('#dot3,#dot4').css('display',Boolean(Palette.Sec1) ? 'block':'none');
	$('#dist-val').css('display',Boolean(Palette.Sec1) ? 'block':'none');
	updateWheel();
	$('#preview-palette').removeClass().addClass('scheme-'+m);
	if ($('#tab-vars').hasClass('sel')) updateVars();
	if ($('#tab-info').hasClass('sel')) updateSchemeInfo();
}
function updateWheel(){
	checkFPS_on();
	moveDot(1,Palette.Primary);
	moveDot(2,Palette.Compl);
	moveDot(3,Palette.Sec1);
	moveDot(4,Palette.Sec2);
	var rgb = Palette.Primary.Col[0].RGB;
	$('#hue-val span').text(Palette.H+'°');
	$('#rgb-val span').text(rgb.getHex());
	$('#rgb-r').html(Math.round(rgb.R/255*100) + ' %');
	$('#rgb-g').html(Math.round(rgb.G/255*100) + ' %');
	$('#rgb-b').html(Math.round(rgb.B/255*100) + ' %');
	$('#dist-val span').text(Palette.Dist+'°');
	colorize();
	checkFPS_off();
}
// Vars Panefunction updateVars(){
	if (UseManualVars) updateManualVars();
	else{
	$('#saturation').css( 'background-color',Palette.Primary.Base.RGB.getCSS() );
	updateContrast();
}
updateSV();
}
function updateSV(){
	checkFPS_on();
	var x,y;
	if (UseManualVars){
	var v = Palette.getVarOverlay(VarSelected[0],VarSelected[1]);
	x = v[0];
	y = v[1];
	x = x - 0.5;
	y = y - 0.5;
	moveSliderDot('#dots,#dotv'+VarSelected[1],x,-y);
}
else{
	x = Palette.dS;
	y = Palette.dV;
	x = x<0 ? (x+1)*0.9-0.5:0.4+x*0.1;
	y = y<0 ? (y+1)*0.9-0.5:0.4+y*0.1;
	moveSliderDot('#dots',x,-y);
}
colorize();
	checkFPS_off();
}
function updateContrast(){
	checkFPS_on();
	var x = Palette.cL,y = Palette.cS;
	moveSliderDot('#dotc',x-0.5,0.5-y);
	colorize();
	checkFPS_off();
}
var UseManualVars = false;
	var VarSelected = [0,0];
	var ColorHash ={
	'pri':0,'sec1':1,'sec2':2,'compl':3}
;
	function updateManualVars(){
	function col(c,id,ttl){
	var hex,id2,v,s = '<a class="ttl" rel="'+id+'" href="#">'+ttl+':</a>';
	s += '<div class="var-set" id="var-set-'+id+'">';
	for (var i=0;
	i<5;
	i++){
	hex = c.getVarRGB(i).getHex();
	id2 = id+'-'+i;
	s += '<a class="col" rel="'+id2+'" href="#"><img src="img/e.png" class="cbox bg-'+id2+'">';
	if (i==0) s += 'Base color';
	else s += 'Variant ' + i;
	s += '</a>';
}
s += '</div>';
	return s;
}
var s = '';
	s += col(Palette.Primary,'pri','主色');
	if (Palette.Sec1) s += col(Palette.Sec1,'sec1','辅助色 A');
	if (Palette.Sec2) s += col(Palette.Sec2,'sec2','辅助色 B');
	if (Palette.Compl) s += col(Palette.Compl,'compl','互补色');
	$('#manualvars').html(s);
	$('#manualvars a.ttl').click( function(){
	var i,v,id = $(this).attr('rel');
	for (i=0;
	i<5;
	i++){
	v = Palette.getVarOverlay(ColorHash[id],i);
	moveSliderDot('#dotv'+i,v[0]-0.5,-v[1]+0.5);
}
if ($(this).next('.var-set').hasClass('sel')) return false;
	$('#manualvars .var-set.sel').removeClass('sel').slideUp('fast');
	$(this).blur().next('.var-set').addClass('sel').slideDown('fast').find('a.col').eq(0).click();
	return false;
}
);
	$('#manualvars a.col').mouseenter( function(){
	var $td = $('#preview-palette').find('.bg-'+$(this).attr('rel')).addClass('hilite');
	if (!$td.html()) $td.html('<div class="text"><span class="row1">Text</span> <span class="row2">Text</span> <span class="row3">Text</span></div>');
}
).mouseleave( function(){
	var $td = $('#preview-palette').find('.bg-'+$(this).attr('rel')).removeClass('hilite');
	if ($('#chk-showtext:checked').length==0) $td.html('');
}
).click( function(){
	$('#manualvars a.sel').removeClass('sel');
	$(this).blur().addClass('sel');
	VarSelected = $(this).attr('rel').split('-');
	VarSelected[0] = ColorHash[VarSelected[0]];
	$('#saturation').css( 'background-color',Palette.getColorByIdx(VarSelected[0]).Base.RGB.getCSS() );
	updateSV();
	return false;
}
);
	$('#manualvars a.ttl').eq(0).click();
}
// Info panefunction updateSchemeInfo(){
	function col(c,id,ttl){
	var hex,s = '<h4>'+ttl+':</h4>';
	s += '<table class="info-table"><tr>';
	for (var i=0;
	i<5;
	i++){
	hex = c.getVarRGB(i).getHex();
	s += '<td class="cbox bg-'+id+'-'+i+'"></td><td class="code">'+hex+'</td>';
}
s += '</tr></table>';
	return s;
}
var s = '';
	s += col(Palette.Primary,'pri','主色');
	if (Palette.Sec1) s += col(Palette.Sec1,'sec1','辅助色 A');
	if (Palette.Sec2) s += col(Palette.Sec2,'sec2','辅助色 B');
	if (Palette.Compl) s += col(Palette.Compl,'compl','互补色');
	$('#coltable').html(s);
	colorize();
}
function exportCols(type){
	getProVersion('Palette Export');
}
// Previewfunction pagePreview(nr){
	var url,ttl,s;
	if (nr==1){
	url = 'sample/index2.html';
	ttl = '高明度网页 | <a href="#" onclick="pagePreview(2);
	return false">低明度网页</a>';
}
else{
	url = 'sample/index.html';
	ttl = '<a href="#" onclick="pagePreview(1);
	return false">高明度网页</a> | 低明度网页';
}
s = '<div class="sample-info">'+ttl;
	if (Palette.Sec1) s += ' • 点击下面色块来改变辅助色';
	s += '</div><iframe class="sample" scrolling="no" frameborder="0"></iframe>';
	var fl = new $.floatbox({
	content:s,button:'<button type="button" class="close-floatbox">Close</button>',fade:false,boxConfig:{
	position:($.browser.msie) ? "absolute":"fixed",zIndex:999,width:"840px",marginLeft:"-420px",height:"auto",top:"50%",left:"50%",backgroundColor:"transparent",display:"none"}
}
);
	$('iframe.sample').attr('src',url);
}
function loadPage(url){
	var s = '<iframe class="sample" src="'+url+'" scrolling="auto" frameborder="0"></iframe>';
	var fl = new $.floatbox({
	content:s,button:'<button type="button" class="close-floatbox">Close</button>',fade:false,boxConfig:{
	position:($.browser.msie) ? "absolute":"fixed",zIndex:999,width:"840px",marginLeft:"-420px",height:"auto",top:"50%",left:"50%",backgroundColor:"transparent",display:"none"}
}
);
	$('iframe.sample').attr('src',url);
}
var Random ={
	Scheme:1,H:1,Dist:1,dS:1,dV:1,cS:1,cL:1}
function randomScheme(){
	getProVersion('Randomize Palette');
}
function randomSettings(){
	getProVersion('Randomize Palette');
}
// Colorize Queuevar LastRefresh = 0,RefreshTimerID;
	function colorize(){
	var t = new Date().valueOf();
	var delta = t - LastRefresh;
	if (delta<defs.MaxRedrawRate){
	if (!RefreshTimerID) RefreshTimerID = setTimeout(doColorize,defs.MaxRedrawRate-delta);
}
else doColorize();
}
// Colorizefunction doColorize(){
	if (RefreshTimerID) clearTimeout(RefreshTimerID);
	RefreshTimerID = null;
	LastRefresh = new Date().valueOf();
	var pri,sec1,sec2,compl;
	var priCol,sec1Col,sec2Col,complCol;
	$('.bg-pri').css('background-color',Palette.Primary.Base.RGB.getCSS());
	for (var i=0;
	i<5;
	i++){
	priCol = Palette.Primary.Col[i];
	if (Palette.Compl) complCol = Palette.Compl.Col[i];
	else complCol = Palette.Primary.Col[2];
	if (Palette.Sec1) sec1Col = Palette.Sec1.Col[i];
	else sec1Col = Palette.Primary.Col[3];
	if (Palette.Sec2) sec2Col = Palette.Sec2.Col[i];
	else sec2Col = Palette.Primary.Col[4];
	pri = priCol.RGB;
	compl = complCol.RGB;
	sec1 = sec1Col.RGB;
	sec2 = sec2Col.RGB;
	if (defs.CBPreview){
	pri = '#'+ ColorBlind.getHex(pri.R,pri.G,pri.B,defs.CBPreview);
	compl = '#'+ ColorBlind.getHex(compl.R,compl.G,compl.B,defs.CBPreview);
	sec1 = '#'+ ColorBlind.getHex(sec1.R,sec1.G,sec1.B,defs.CBPreview);
	sec2 = '#'+ ColorBlind.getHex(sec2.R,sec2.G,sec2.B,defs.CBPreview);
}
else{
	pri = pri.getCSS();
	compl = compl.getCSS();
	sec1 = sec1.getCSS();
	sec2 = sec2.getCSS();
}
$('.col-pri-'+i).css('color',pri);
	$('.col-compl-'+i).css('color',compl);
	$('.col-sec1-'+i).css('color',sec1);
	$('.col-sec2-'+i).css('color',sec2);
	$('.bg-pri-'+i).css('background-color',pri).each( function(){
	this.paletteInfo ={
	col:priCol,out:pri}
}
);
	$('.bg-compl-'+i).css('background-color',compl).each( function(){
	this.paletteInfo ={
	col:complCol,out:compl}
}
);
	$('.bg-sec1-'+i).css('background-color',sec1).each( function(){
	this.paletteInfo ={
	col:sec1Col,out:sec1}
}
);
	$('.bg-sec2-'+i).css('background-color',sec2).each( function(){
	this.paletteInfo ={
	col:sec2Col,out:sec2}
}
);
	$('.brd-pri-'+i).css('border-color',pri);
	$('.brd-compl-'+i).css('border-color',compl);
	$('.brd-sec1-'+i).css('border-color',sec1);
	$('.brd-sec2-'+i).css('border-color',sec2);
}
SchemeID = Palette.serialize();
	var sID = SchemeID;
	if (sID.length>64) sID = '&lt;
	ID too long to display&gt;
	';
	$('#schemeid a').html(sID).attr('href',document.location.pathname+'#'+SchemeID);
	if (!drag.on) updateColorData();
}
function updateColorData(){
	History.add();
	colorTooltips();
}
// Historyvar History ={
	Ptr:0,add:function(){
}
,back:function (){
	getProVersion('Undo')}
,fwd:function (){
	getProVersion('Redo')}
}
// drag & dropvar moveTimer = 0;
	function dragMove(e,elm){
	var t0 = new Date();
	if (t0-moveTimer<defs.FPSlimiter) return false;
	moveTimer = t0;
	if (elm.id=='wheel') moveOnWheel(e);
	else moveOnSlider(e,elm);
}
function moveOnWheel(e){
	var x,y,h,r,movedHue = false,movedDist = false;
	if (e){
	x = e.pageX - drag.dX;
	y = e.pageY - drag.dY;
	h = Math.round(((Math.atan2(-x,y) * 180/Math.PI) + 180) % 360);
	r = Math.sqrt(x*x + y*y);
}
else{
	movedHue = true,movedDist = true;
}
if (r>60 && r<160){
	var dot = 'dot1';
	if (drag.dot) dot = drag.dot.id;
	if (dot=='dot1' || dot=='dot2'){
	if (r>125){
	if (r<135) h = (Math.floor((h-7.5)/15 + 1) * 15) % 360;
	else h = (Math.floor((h-15)/30 + 1) * 30) % 360;
}
if (dot=='dot2') h = (h+180)%360;
	movedHue = Palette.setHue(h);
}
else{
	if (Palette.Scheme=='m4' && dot=='dot4') h = (h+180)%360;
	movedDist = Palette.setDist(h);
}
}
if (movedHue || movedDist) updateWheel();
}
function moveOnSlider(e,elm){
	if (UseManualVars){
	$('#saturation').trigger('mouseup');
	getProVersion('Adjust Variants');
	return;
}
var x = e.pageX - drag.dX;
	var y = e.pageY - drag.dY;
	x = x / defs.sliderWidth;
	y = y / defs.sliderWidth;
	if (x<-0.5) x = -0.5;
	if (x>0.5) x = 0.5;
	if (y<-0.5) y = -0.5;
	if (y>0.5) y = 0.5;
	if (elm.id=='saturation'){
	var s,v;
	// -0.5..0.4 => -1..0;
	0.4..0.5 => 0..1s = x>0.4 ? (x-0.4)/0.1:(x+0.5)/0.9-1;
	y = -y;
	v = y>0.4 ? (y-0.4)/0.1:(y+0.5)/0.9-1;
	Palette.setSV(s,v);
	updateSV();
}
else if (elm.id=='contrast'){
	// -0.5..0.5 => 0..1var cL = x + 0.5;
	var cS = 0.5 - y;
	Palette.setContrast(cS,cL);
	updateContrast();
}
if ($('#presets select').get(0).selectedIndex!=0){
	$('#presets select').get(0).selectedIndex = 0;
	$('#presets select').trigger('change');
}
}
function moveDot(n,col){
	if (!col) return;
	var h = col.Col[0].HSV.H;
	var r = (h-90)/360 * 2*Math.PI;
	x = Math.round( defs.wheelMid.X + 109*Math.cos(r) ) - defs.dotSize;
	y = Math.round( defs.wheelMid.Y + 109*Math.sin(r) ) - defs.dotSize;
	$('#dot'+n).css('left',x+'px').css('top',y+'px');
}
function moveSliderDot(sel,x,y){
	x = defs.sliderMid.X + x * defs.sliderWidth - defs.dotSize + 1;
	y = defs.sliderMid.Y + y * defs.sliderWidth - defs.dotSize + 3;
	$(sel).css('left',x+'px').css('top',y+'px');
}
// promptsfunction myPrompt(str,val,callback){
	var s = '<div id="prompt"><p>'+str+'</p>';
	s += '<p class="input"><input id="prompt-input" name="prompt-input" type="text" value="'+val+'"></p>';
	s += '<p class="submit"><button id="prompt-cancel" class="close-floatbox">Cancel</button> <button id="prompt-ok" class="close-floatbox">OK</button></p>';
	s += '</div>';
	var fl = new $.floatbox({
	content:s,button:'',fade:false,boxConfig:{
	position:($.browser.msie) ? "absolute":"fixed",zIndex:999,width:"360px",marginLeft:"-180px",height:"auto",top:"33%",left:"50%",backgroundColor:"transparent",display:"none"}
}
);
	$('#prompt-ok').click( function(){
	callback($('#prompt-input').val());
}
)$('#prompt-input').keypress( function(e){
	if(e.keyCode==13) $('#prompt-ok').click()}
).focus().select();
}
function getExpr(s){
	if (!s) return '';
	if (s.match(/[0-9\.\+\-\*/
 ]+/)) s = eval(s);
	return s;
}
function enterHue(){
	myPrompt('Enter hue (0°–360°)',Palette.H,enterHue2);
}
function enterHue2(h){
	h = parseInt(getExpr(h),10)%360;
	if (h>=0 && h<=360){
	Palette.setHue(h%360);
	updateWheel();
}
}
function enterComplHue(){
	myPrompt('Enter complement hue (0°–360°)',(Palette.H+180)%360,enterComplHue2 );
}
function enterComplHue2(h){
	h = parseInt(getExpr(h),10)%360;
	if (h>=0 && h<=360){
	Palette.setHue((h+180)%360);
	updateWheel();
}
}
function enterDist(){
	var min = Palette.SchemeModel.minD,max = Palette.SchemeModel.maxD;
	myPrompt('Enter Distance/Angle ('+min+'°–'+max+'°)',Palette.Dist,enterDist2);
}
function enterDist2(a){
	var min = Palette.SchemeModel.minD,max = Palette.SchemeModel.maxD;
	a = Math.abs(parseInt(getExpr(a),10));
	if (a>=min && a<=max){
	Palette.setDistNum(a);
	updateWheel();
}
}
function enterRGB(){
	myPrompt('Enter RGB value (000000–FFFFFF)',Palette.Primary.getVarRGB(0).getHex(),enterRGB2);
}
function enterRGB2(s){
	if (s && s.match(/^\s*[0-9a-fA-F]{
	6}
\s*$/)){
	var r = hex2dec(s.substring(0,2))var g = hex2dec(s.substring(2,4));
	var b = hex2dec(s.substring(4,6));
	var rgb = new RGB(r,g,b);
	var hsv = ColorWheel.getColorByRGB(rgb);
	Palette.setHSV(hsv);
	updateWheel();
	$('#presets select').get(0).selectedIndex = 0;
	$('#presets select').trigger('change');
}
}
function colorTooltips(){
	$('.cbox').tooltip({
	bodyHandler:function(){
	var src = '#' + this.paletteInfo.col.RGB.getHex();
	var out = this.paletteInfo.out;
	var s = src;
	if (defs.CBPreview) s += '<br>(as '+out+')';
	return s;
}
,showURL:false,delay:0,fade:0,track:true,extraClass:'color',top:15,left:10}
);
}
function showTooltips(){
	$('#menu-tooltips').addClass('sel').html('Hide Tooltips');
	$('.help').tooltip({
	bodyHandler:function(){
	return $('#help-'+$(this).attr('id')).html();
}
,showURL:false,delay:0,fade:250,track:true,left:-50}
);
	if (pageTracker) pageTracker._trackPageview("/pseudo/tooltips.html");
}
function hideTooltips(){
	$('#menu-tooltips').removeClass('sel').html('Show Tooltips');
	$('.help').tooltipOff();
}
function getProVersion(str){
	var s = '<div id="prompt">';
	if (str) s += '<h4>&raquo;
	'+str+' &laquo;
	</h4>';
	s += '<p>This feature is not available in the free version. <strong>Get the <a href="getpro.html" target="_blank">Pro Version</a> for more features</strong>,precize color adjustments,customized previews and much more. Check the detailed <a href="getpro.html" target="_blank">feature list</a>.</p>';
	s += '<p>Note:If you have already donated you can have the Pro version licence for free.</p>';
	s += '<p class="submit"><button id="prompt-ok" class="close-floatbox">OK</button></p>';
	s += '</div>';
	var fl = new $.floatbox({
	content:s,button:'',fade:false,boxConfig:{
	position:($.browser.msie) ? "absolute":"fixed",zIndex:999,width:"360px",marginLeft:"-180px",height:"auto",top:"33%",left:"50%",backgroundColor:"transparent",display:"none"}
}
);
}

JS代码(app_pro.js):

/** app.js - Color Scheme Designer application library* Copyright (c) 2009,Petr Stanicek,pixy@pixy.cz ("the author")* All rights reserved.** Redistribution and use in source and binary forms,with or without* modification,are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright* notice,this list of conditions and the following disclaimer.* * Redistributions in binary form must reproduce the above copyright* notice,this list of conditions and the following disclaimer in the* documentation and/or other materials provided with the distribution.* * Any commercial use of this software is not allowed unless an exemption* was granted by the author.** This software is provided by the author "as is" and any express or implied* warranties,including,but not limited to,the implied warranties or* merchantability and fitness for a particular purpose are disclaimed.* In no event shall the author be liable for any direct,indirect,incidental,* special,exemplary,or consequential damages (including,but not limited to,* procurement of substitute goods or services;
	loss of use,data,or profits;
	* or business interruption) however caused and on any theory of liability,* whether in contract,strict liability,or tort (including negligence or* otherwise) arising in any way out of the use of this software,even if* advised of the possibility of such damage.*/
// INIT$(function(){
	$('#menu a').removeClass('disabled');
	//$('#menu-getpro,#relatedlinks').hide();
	$('#preview-palette .cbox').click( function(){
	if ($('#tab-vars').hasClass('sel') && UseManualVars){
	var rel = $(this).attr('rel');
	var id = rel.split('-');
	id = id[0];
	$('#manualvars a.ttl').filter( function(){
	return $(this).attr('rel')==id}
).click();
	$('#manualvars a.col').filter( function(){
	return $(this).attr('rel')==rel}
).click();
}
return false;
}
);
	History.updateMenu();
}
);
	History ={
	List:[],Ptr:-1,add:function(){
	if (this.Ptr<0 || this.List[this.Ptr]!=SchemeID){
	if (this.List.length>this.Ptr+1) this.List = this.List.splice(0,this.Ptr+1);
	this.List.push(SchemeID);
	this.Ptr++;
	this.updateMenu();
}
}
,back:function (){
	if (this.Ptr<1) return;
	this.Ptr--;
	loadScheme(this.List[this.Ptr]);
	this.updateMenu();
}
,fwd:function (){
	if (this.Ptr>=this.List.length-1) return;
	this.Ptr++;
	loadScheme(this.List[this.Ptr]);
	this.updateMenu();
}
,updateMenu:function (){
	if (this.Ptr>0) $('#menu-undo').removeClass('disabled');
	else $('#menu-undo').addClass('disabled');
	if (this.Ptr<this.List.length-1) $('#menu-redo').removeClass('disabled');
	else $('#menu-redo').addClass('disabled');
}
}
function randomScheme(){
	var Scheme = Random.Scheme ? 'm' + Math.ceil(Math.random()*6):Palette.Scheme;
	var H = Random.H ? Math.floor(Math.random()*360):Palette.H;
	var Dist = Random.Dist ? 5 + Math.round(Math.random()*55):Palette.Dist;
	var dS = Random.dS ? -1 + Math.random()*2:Palette.dS;
	var dV = Random.dV ? -1 + Math.random()*2:Palette.dV;
	var cS = Random.cS ? Math.random():Palette.cS;
	var cL = Random.cL ? Math.random():Palette.cL;
	Palette.setAll(Scheme,H,Dist,dS,dV,cS,cL);
	updateScheme();
	updateWheel();
	updateVars();
	updateSchemeInfo();
}
function randomSettings(){
	function chkbox(id,label,on){
	return '<p class="input chkbox"><input id="'+id+'" type="checkbox"'+ (on ? ' checked':'') +'> <label for="'+id+'">'+label+'</label></p>';
}
var s = '<div id="prompt"><h4>Randomize Parameters:</h4>';
	s += chkbox('rnd-scheme','Color scheme model',Random.Scheme);
	s += chkbox('rnd-h','Hue',Random.H);
	s += chkbox('rnd-d','Angle/Distance',Random.Dist);
	s += chkbox('rnd-ds','Saturation',Random.dS);
	s += chkbox('rnd-dv','Brightness',Random.dV);
	s += chkbox('rnd-cs','Contrast (Shadows)',Random.cS);
	s += chkbox('rnd-cl','Contrast (Lights)',Random.cL);
	s += '<p class="submit"><button id="prompt-cancel" class="close-floatbox">Cancel</button> <button id="prompt-ok" class="close-floatbox">OK</button></p>';
	s += '</div>';
	var fl = new $.floatbox({
	content:s,button:'',fade:false,boxConfig:{
	position:($.browser.msie) ? "absolute":"fixed",zIndex:999,width:"360px",marginLeft:"-180px",height:"auto",top:"33%",left:"50%",backgroundColor:"transparent",display:"none"}
}
);
	$('#prompt-ok').click( function(){
	Random.Scheme = $('#rnd-scheme:checked').length;
	Random.H = $('#rnd-h:checked').length;
	Random.Dist = $('#rnd-d:checked').length;
	Random.dS = $('#rnd-ds:checked').length;
	Random.dV = $('#rnd-dv:checked').length;
	Random.cS = $('#rnd-cs:checked').length;
	Random.cL = $('#rnd-cl:checked').length;
}
)$('#prompt-input').keypress( function(e){
	if(e.keyCode==13) $('#prompt-ok').click()}
).focus().select();
}
function exportCols(type){
	function col(c,id,ttl){
	var s = '"'+id+'":{
	"ttl":"'+ttl+'","col":[';
	for (var i=0;
	i<5;
	i++){
	v = c.getVarRGB(i);
	code = v.getHex();
	if (i>0) s += ',';
	s += '{
	"hex":"'+code+'","r":'+v.R+',"g":'+v.G+',"b":'+v.B+'}
';
}
s += ']}
';
	return s;
}
var s = '{
	\"type":"'+type+'",\"id":"'+SchemeID+'",\"scheme":{
	';
	s += col(Palette.Primary,'primary','��ɫ');
	if (Palette.Sec1) s += ',' + col(Palette.Sec1,'secondary-a','����ɫ A');
	if (Palette.Sec2) s += ',' + col(Palette.Sec2,'secondary-b','����ɫ B');
	if (Palette.Compl) s += ',' + col(Palette.Compl,'complement','����ɫ');
	s += '}
}
';
	$('#form').attr('action','http://colorschemedesigner.com/export/').attr('method','POST').attr('target','_blank');
	$('#form-data').val(s);
	$('#form').submit();
}
function useColorBlind(n){
	defs.CBPreview = n;
	$('#menu-vision,#colorblind a').removeClass('sel');
	if (n>0){
	$('#menu-vision').addClass('sel');
	$('#colorblind a').eq(n).addClass('sel');
	$('#cb-warning').show();
}
else{
	$('#cb-warning').hide();
}
colorize();
}
function moveOnSlider(e,elm){
	var x = e.pageX - drag.dX;
	var y = e.pageY - drag.dY;
	x = x / defs.sliderWidth;
	y = y / defs.sliderWidth;
	if (x<-0.5) x = -0.5;
	if (x>0.5) x = 0.5;
	if (y<-0.5) y = -0.5;
	if (y>0.5) y = 0.5;
	if (elm.id=='saturation'){
	var s,v;
	if (UseManualVars){
	// -0.5..0.9 => 0..1s = x + 0.5;
	v = -y + 0.5;
	Palette.setVarOverlay(VarSelected[0],VarSelected[1],s,v);
}
else{
	// -0.5..0.4 => -1..0;
	0.4..0.5 => 0..1s = x>0.4 ? (x-0.4)/0.1:(x+0.5)/0.9-1;
	y = -y;
	v = y>0.4 ? (y-0.4)/0.1:(y+0.5)/0.9-1;
	Palette.setSV(s,v);
}
updateSV();
}
else if (elm.id=='contrast'){
	// -0.5..0.5 => 0..1var cL = x + 0.5;
	var cS = 0.5 - y;
	Palette.setContrast(cS,cL);
	updateContrast();
}
if ($('#presets select').get(0).selectedIndex!=0){
	$('#presets select').get(0).selectedIndex = 0;
	$('#presets select').trigger('change');
}
}

CSS代码(default.css):

body{margin:0;background:#202020;color:#808080;font:11px/1.33 Verdana,sans-serif;}
a{color:#887;}
a:hover{color:white;}
input,select,button{font-size:100%;vertical-align:middle;}
select,button{background:#202020;color:#999;border:1px dotted #666;}
#jscheck{margin:20%;padding:2em 4em;border:1px dotted #666;text-align:center;}
#jscheck hr{display:none;}
#canvas{width:980px;height:710px;margin:10px auto;position:relative;background:url('../img/ui.png') 0 0 no-repeat;}
h1{display:none;}
h2{position:absolute;top:60px;left:27px;margin:0;font-size:9px;font-weight:normal;color:#555;}
h2 a{color:#555;}
h2 a strong{color:#665;font-weight:normal;}
.pane{position:absolute;top:205px;left:25px;width:380px;height:380px;}
/* @group menu */
#menu{position:absolute;top:0;left:440px;z-index:1;width:540px;background:#202020;margin:0;padding:0;list-style:none;font-size:11px;line-height:1.1;}
#menu li{list-style:none;margin:0;padding:0;float:left;position:relative;}
#menu ul{display:none;position:absolute;left:0;/*width:150px;*/
margin:0;padding:0;}
#menu ul{border-left:1px solid black;border-right:2px solid black;border-bottom:2px solid black;background:#202020;}
#menu ul ul{left:145px;}
* html #menu ul{line-height:0;}
/* IE6 "fix" */
#menu ul a{zoom:1;}
/* IE6/7 fix */
#menu ul li{float:none;}
#menu ul ul{top:3px;}
#menu li.sep{padding:5px;background:#202020;font-size:1px;}
#menu hr{margin:0;padding:0;height:1px;border:none;border-top:1px solid #404040;}
#menu a{display:block;text-align:center;padding:3px 15px 7px;text-decoration:none;color:#808080;background:#202020;border-left:1px solid #333;white-space:nowrap;cursor:default;}
#menu a:hover{background-color:#999;color:#000;}
#menu ul a{padding:8px 15px;text-align:left;border:none;background-color:#202020;color:#ccc;cursor:pointer;}
#menu ul a:hover{background-color:#999;color:#000;}
#menu a.disabled{color:#404040;background:#202020;cursor:default;}
#menu #colorblind a{padding-left:30px;}
#menu #colorblind a.sel{color:#fc0;background-image:url('../img/warning.png');background-position:7px 50%;background-repeat:no-repeat;}
#menu a.sel{color:#fc0;}
/* @end */
/* @group tabs */
#tabs-color{position:absolute;top:605px;left:8px;width:415px;height:27px;}
#tabs-preview{position:absolute;top:606px;left:430px;width:542px;height:27px;}
#tab-api{position:absolute;top:0;left:715px;width:265px;height:27px;}
.tabs a{display:block;position:absolute;top:0;left:0;background:#333;color:#808080;font-size:11px;line-height:27px;text-align:center;text-decoration:none;white-space:nowrap;}
.tabs a.sel{background:transparent;}
.tabs a:hover{color:#ccc;}
.tabs a.sel:hover{color:#808080;}
#tab-api a{width:100%;font-size:9px;background:#252525;color:#808080;overflow:visible;}
#tab-api a.sel{font-size:11px;background:#000;color:#999;}
#tab-api a:hover{background:#282828;color:#ccc;}
#tab-wheel{left:0;width:137px;}
#tab-vars{left:138px;width:138px;}
#tab-info{left:277px;width:138px;}
#tab-preview{left:0;width:180px;}
#tab-preview2{left:181px;width:180px;}
#tab-preview3{left:362px;width:180px;}
/* @end */
#debug{position:absolute;top:120px;left:450px;}
/* @group Model */
#model{position:absolute;top:95px;left:25px;width:380px;border-collapse:collapse;border:none;}
#model td{border:none;padding:0;text-align:center;vertical-align:top;}
#model a{display:block;border:none;width:50px;margin:auto;padding:55px 0 0 0;background:url('../img/model.png') 0 0 no-repeat;font-size:12px;color:#808080;text-decoration:none;}
#model a.sel{color:#ccc;}
#model a:hover{color:white;text-decoration:underline;}
#model a.sel:hover{color:#ccc;text-decoration:none;}
a#m2{background-position:-50px 0}
a#m3{background-position:-100px 0}
a#m4{background-position:-150px 0}
a#m5{background-position:-200px 0}
a#m6{background-position:-250px 0}
a#m1.sel,a#m1:hover{background-position:-300px 0}
a#m2.sel,a#m2:hover{background-position:-350px 0}
a#m3.sel,a#m3:hover{background-position:-400px 0}
a#m4.sel,a#m4:hover{background-position:-450px 0}
a#m5.sel,a#m5:hover{background-position:-500px 0}
a#m6.sel,a#m6:hover{background-position:-550px 0}
/* @end */
/* @group Wheel */
#pane-wheel{position:absolute;top:205px;left:25px;width:380px;height:380px;}
#wheel{width:100%;height:100%;background:url('../img/wheel_bkgr.png') center no-repeat;}
#wh1{position:absolute;top:0;left:0;width:190px;height:190px;background:url('../img/wheel1.png') right bottom no-repeat;}
#wh2{position:absolute;top:0;left:190px;width:190px;height:190px;background:url('../img/wheel2.png') left bottom no-repeat;}
#wh3{position:absolute;top:190px;left:0;width:190px;height:190px;background:url('../img/wheel3.png') right top no-repeat;}
#wh4{position:absolute;top:190px;left:190px;width:190px;height:190px;background:url('../img/wheel4.png') left top no-repeat;}
.dot,.dotv{position:absolute;width:13px;height:13px;background:url('../img/dot1.png') 0 0 no-repeat;}
.dot{cursor:pointer;}
#wheel #dot2{display:none;background-image:url('../img/dot3.png')}
#wheel #dot3,#wheel #dot4{display:none;background-image:url('../img/dot2.png')}
#sample{position:absolute;top:120px;left:120px;z-index:0;width:140px;height:140px;background:gray;}
#wheel .val{position:absolute;z-index:10;font-size:11px;line-height:1;color:#808080;text-align:left;cursor:pointer;}
#wheel .val span{color:#ccc}
#wheel #hue-val{top:5px;left:0}
#wheel #dist-val{top:5px;right:0;text-align:right}
#wheel #rgb-val{bottom:5px;right:0}
#rgb-parts{position:absolute;z-index:10;bottom:10px;left:0;border-collapse:collapse;border:none;}
#rgb-parts th,#rgb-parts td{padding:1px 3px 0 0;text-align:right;font-weight:normal;color:#808080;font-size:9px;line-height:1;}
/* @end */
/* @group Vars */
#pane-vars{display:none;}
.slider .dot{background-image:url('../img/dot3.png');}
.slider .dotv{display:none;background-image:url('../img/dot4.png');}
#presets{position:absolute;top:25px;left:5px;z-index:100;text-align:left;}
#presets select{font-size:12px;line-height:1.1;font-weight:normal;}
#saturation-cover{position:absolute;left:-3px;top:95px;width:190px;height:240px;background:#282828;}
#saturation-cover h4{position:absolute;left:0;top:10px;margin:0;width:100%;font-size:11px;line-height:13px;font-weight:normal;text-align:center;}
#ttl-c2{display:none}
#saturation{position:absolute;left:28px;top:65px;width:140px;height:140px;}
#saturation .slider{position:absolute;left:-26px;top:-28px;width:190px;height:190px;background:url('../img/sv_slider_alpha.png') top center no-repeat;}
#contrast-cover{position:absolute;left:193px;top:95px;width:190px;height:240px;background:#282828;}
#tabs-contrast{position:absolute;left:0;top:0;}
#tabs-contrast a{width:95px;height:25px;padding:6px 0 4px 0;font-size:9px;line-height:11px;background:#333;}
#tab-c1{left:0}
#tab-c2{left:95px}
#tabs-contrast a.sel{padding:10px 0 0 0;background:#282828;font-size:11px;line-height:13px;}
#contrast{position:absolute;left:0;top:35px;width:190px;height:190px;background:url('../img/c_slider.png') top center no-repeat;}
#manualvars{display:none;position:absolute;left:0;top:45px;width:190px;}
#manualvars a.ttl{display:block;margin:1px 0;padding:3px 10px;color:#999;background:#202020;font-weight:normal;text-decoration:none;}
#manualvars a.ttl:hover{background:black;}
.var-set{display:none;}
#manualvars a.col{display:block;margin:1px 0;padding:2px 10px 2px 15px;color:#999;background:transparent;text-decoration:none;}
#manualvars a.col:hover{background:black;}
#manualvars a.col.sel{background:black;color:#ccc;}
#manualvars .cbox{width:18px;height:18px;margin-right:10px;border:1px solid #202020;vertical-align:middle;}
#manualvars .code{display:none}
/* @end */
/* @group pane-info */
#pane-info{display:none;}
#pane-info h4{margin:1em 0 1em 0;font-size:12px;font-weight:normal;color:#ccc;}
.info-table{width:100%;margin:0;border-collapse:collapse;border:none;font-size:10px;color:#999;}
.info-table td.cbox{width:20px;height:25px;border:1px solid #202020;}
.info-table td.code{padding-left:5px;text-align:left;vertical-align:middle;}
#export{margin-top:2em;padding-top:0.5em;border-top:1px dotted #666;font-size:115%;text-align:center;}
#export strong{margin-right:1em;}
#export .smaller{font-size:85%;}
.export{padding:1em;}
.export pre{font:11px/1.1 monospace;}
/* @end */
/* @group Palette */
#palette{position:absolute;top:55px;left:500px;border-collapse:collapse;border:none;}
#palette td{border:2px solid #333;width:85px;height:85px;}
#schemeid{position:absolute;top:150px;left:445px;width:480px;margin:0;font-size:9px;font-weight:normal;text-align:center;}
#schemeid span{color:#ccc;}
#page-preview{position:absolute;top:160px;left:465px;width:480px;margin:0;font-size:12px;font-weight:normal;text-align:center;}
/* @end */
/* @group preview */
#preview-palette-canvas{position:absolute;top:210px;left:460px;width:490px;height:360px;}
#preview-palette-bg1{position:absolute;top:0;left:0;width:85%;height:80%;background:white;}
#preview-palette-bg2{position:absolute;bottom:0;right:0;width:85%;height:85%;background:black;}
#preview-palette{position:absolute;top:4px;left:4px;width:480px;border-collapse:collapse;border:none;}
#preview-palette td{padding:0;text-align:center;vertical-align:middle;overflow:hidden;border:none;}
#preview-palette td.bg-pri-0{width:56%}
#preview-palette td.bg-pri-1,#preview-palette td.bg-pri-3{width:22%}
#preview-palette.scheme-m1 tr.pri td{height:175px}
#preview-palette.scheme-m1 tr.sec td{display:none}
#preview-palette.scheme-m1 tr.compl td{display:none}
#preview-palette.scheme-m2 tr.pri td{height:141px}
#preview-palette.scheme-m2 tr.sec td{display:none}
#preview-palette.scheme-m2 tr.compl td{height:34px}
#preview-palette.scheme-m3 tr.pri td{height:89px}
#preview-palette.scheme-m3 tr.sec td{height:43px}
#preview-palette.scheme-m3 tr.compl td{display:none}
#preview-palette.scheme-m4 tr.pri td{height:73px}
#preview-palette.scheme-m4 tr.sec td{height:35px}
#preview-palette.scheme-m4 tr.compl td{height:32px}
#preview-palette.scheme-m5 tr.pri td{height:89px}
#preview-palette.scheme-m5 tr.sec td{height:43px}
#preview-palette.scheme-m5 tr.compl td{display:none}
#preview-palette.scheme-m6 tr.pri td{height:73px}
#preview-palette.scheme-m6 tr.sec td{height:35px}
#preview-palette.scheme-m6 tr.compl td{height:32px}
#preview-palette .text{display:inline;padding:2px 5px;font-size:9px;line-height:10px;white-space:nowrap;}
#preview-palette .text .row1{color:white}
#preview-palette .text .row2{color:gray}
#preview-palette .text .row3{color:black}
#preview-palette .hilite .text{font-size:10px;border:1px outset #202020;}
#showtext{position:absolute;top:575px;left:460px;width:490px;text-align:right;color:#555;}
/* @end */
#preview-pars{position:absolute;top:603px;left:460px;width:490px;white-space:nowrap;}
#fps{position:absolute;top:7px;left:520px;white-space:nowrap;font-size:9px;color:#555;text-align:left;}
#randomize{position:absolute;top:7px;left:560px;width:155px;margin:0;font-size:9px;text-align:center;}
#randomize span{font-size:9px;}
#cb-warning{display:none;position:absolute;top:612px;left:445px;width:15px;height:15px;background:url('../img/warning.png') center no-repeat;}
/*#colorblind{position:absolute;top:660px;right:0;text-align:right;vertical-align:middle;white-space:nowrap;color:#555;}
#colorblind label.hilite{color:#970;}
#colorblind select{font-size:125%;}
#colorblind .select-replace{color:#555;border-color:#404040;}
*/
/*#showtooltips{position:absolute;top:660px;left:150px;color:#555;text-align:left;}
*/
#donate{position:absolute;top:660px;left:10px;text-align:left;}
#donate .btn{width:122px;height:40px;background:url('../img/donate.png') 0 -60px no-repeat;}
#donate .btn:hover{height:60px;background-position:0 0;}
#relatedlinks{position:absolute;top:680px;right:10px;width:820px;text-align:right;vertical-align:middle;white-space:nowrap;color:#555;font-size:100%;}
#relatedlinks a{color:#555}
#relatedlinks a:hover{color:#808080}
.select-replace{padding:5px 30px 5px 10px;background:url('../img/ddarrow.png') 98% 50% no-repeat;color:#999;border:1px dotted #555;}
#help{display:none;}
#tooltip{position:absolute;z-index:9999;width:200px;padding:10px 15px;opacity:0.9;background:#000;color:#ccc;border:1px solid #666;font-size:95%;line-height:1.66;}
#tooltip.color{width:auto;text-align:center;font-size:10px;padding:2px 5px;}
iframe.sample{width:100%;height:610px;margin:0 auto;border:1px solid #404040;}
.sample-info{padding:3px 5px;background:black;color:#ccc;}
#form{display:none;}
#prompt{padding:25px 50px;border:1px outset #000;background:#202020;color:#ccc;text-align:center;font-size:12px;}
#prompt .submit{margin-top:3em;}
#prompt-input{background:#000;color:#ccc;border:1px solid #666;padding:5px;width:7em;font-size:15px;}
#prompt .chkbox{margin:0;text-align:left;}
#prompt button{margin:0 0.5em;padding:2px 1em;vertical-align:middle;font-size:14px;border:1px outset #000;}
#prompt-ok{background:#333;color:#ccc;font-weight:bold;}
#prompt-cancel{background:#202020;color:#999;font-weight:normal;}
#shoplink{position:absolute;top:50px;left:910px;display:block;width:98px;height:106px;background:url('../img/shop.png') 0 0 no-repeat;}
#shoplink:hover{background-position:-100px 0;}
#shoplink2{position:absolute;top:50px;left:910px;display:block;width:98px;height:106px;background:url('../img/banner.png') 0 0 no-repeat;}
#shoplink2:hover{background-position:-100px 0;}
#shoplink2:active{background-position:-200px 0;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
125.02 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
125.02 KB
立即下载
强锦雅
了解
打赏作者 鼓励作者
jquery特效8
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章