<html>
<!-- 作者:朱榕华 联系邮箱:1311791769@qq.com-->
<head>
<title>配色插件</title>
<script src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var toBigOX = function(color){
return '#'+$.trim(color)
.replace(/[^a-fA-F\d]/g,'')
.replace(/a/g,'A')
.replace(/b/g,'B')
.replace(/c/g,'C')
.replace(/d/g,'D')
.replace(/e/g,'E')
.replace(/f/g,'F').substr(0,6);
}
var toFullOX = function(color){
if(color.length==4){
return '#' + color.substr(1,1) + color.substr(1,1) +
color.substr(2,1) + color.substr(2,1) +
color.substr(3,1) + color.substr(3,1);
}else if(color.length==7){
return color;
}else{
return '';
}
}
var oxToRGB = function(color){
var prefix='0x';
if(color.length==4){
return 'rgb('+[
parseInt(prefix + color.substr(1,1) + color.substr(1,1)),
parseInt(prefix + color.substr(2,1) + color.substr(2,1)),
parseInt(prefix + color.substr(3,1) + color.substr(3,1))
].join(',')+');'
}else if(color.length==7){
return 'rgb('+[
parseInt(prefix + color.substr(1,2)),
parseInt(prefix + color.substr(3,2)),
parseInt(prefix + color.substr(5,2))
].join(',')+')'
}else{
return '';
}
}
$('.colorInput').keyup(function(){
$(this).val(toBigOX($(this).val()));
$(this).next().css({
backgroundColor:$(this).val()
}).text(toFullOX($(this).val()));
$(this).next().next().css({
color:$(this).val()
}).text(oxToRGB($(this).val()));
});
$('.rgbInput').keyup(function(){
var rgbs = $(this).val().replace(/[rgb()]/g,'').split(',');
if(rgbs.length>1){
for(var i=0; i<rgbs.length;i++){
$($(this).parent().find('.rgbInput')[i]).val(rgbs[i]);
}
}
var rgb = new Array();
var ox = new Array();
$(this).parent().find('input.rgbInput').each(function(i){
var s = parseInt($(this).val().replace(/[^\d]/g,''));
if(s){
$(this).val( s>255 ? 255 : s);
rgb[i]=$(this).val();
ox[i]=(s>255 ? 255 : s).toString(16);
ox[i] = ox[i].length>1 ? ox[i] : '0'+ox[i];
}
});
if(rgb.length==3){
$(this).parent().find('div:last').css({
color: 'rgb('+rgb.join(',')+')'
}).text('rgb('+rgb.join(',')+')');
$(this).parent().find('div:first').css({
backgroundColor: '#'+ox.join('')
}).text(toBigOX(ox.join('')));
$(this).parent().find('input:first').val(toBigOX(ox.join('')));
}
});
$('#allValue').click(function(){
var colors = $.trim($(this).prev().val()).replace(/\"/g,'').split(',');
$('.color').each(function(i){
$(this).find('input:first').val(colors[i]).keyup();
});
});
$('#allColorInput').val(
'"#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", aaeeee, "#f06", eae", "#55BF3B", "#DF5353", #7798BF, "#aee"'
);
$('.showRGBColor').click(function(){
$(this).next().focus();
});
$('.showOxColor').click(function(){
$(this).prev().focus();
});
var setClipboardData = function(text){
window.clipboardData.setData("Text",text);
$('#currColorShow').find('div:first').text(text);
$('#currColorShow').find('div:last').css('backgroundColor',text);
}
$('.showRGBColor,.showOxColor').hover(function(){
setClipboardData($(this).text());
});
$('.colorInput').hover(function(){
setClipboardData($(this).val());
});
$('.rgbInput').hover(function(){
setClipboardData($(this).parent().find('div:last').text());
});
$('input').focus(
function(){
$('input').css('border','1px solid #AEE');
$(this).parent().css({
'border' : '1px solid #55BF3B',
'marginTop' : '10px',
'marginBottom' : '10px'
})
$(this).css('border','2px solid #5BF');
}
).blur(
function(){
$('input').css('border','1px dotted gray');
$(this).parent().css({
'border':'none',
'marginTop' : '0',
'marginBottom' : '0'
})
}
);
for(i=0; i<4; i++)
$('#colorBox').append($('.color').clone(true));
});
</script>
<style>
.color div{text-align:center;width:120px;height:20px;line-height:20px;display:inline;border:1px dotted gray;margin:0 10px;}
.rgbInput{width:50px;border:1px dotted gray;}
.pl50{margin-left:200px;}
#colorBox{width:810px;}
</style>
</head>
<body>
<input id="allColorInput" style="width:800px" /><button id="allValue">查看颜色</button>
<div class="pl50" style="margin-bottom:20px;"></div>
<div id="colorBox">
<div class="color pl50">
<input title="这是16进制的颜色" class="colorInput" maxlength="7" size="7" value="#" /> -->
<div class="showOxColor" title="这是16进制的颜色"></div>
<div class="showRGBColor" title="这是RGB的颜色"></div>
<-- rgb(<input title="这是RGB的红色" class="rgbInput" />,
<input title="这是RGB的绿色" class="rgbInput" />,
<input title="这是RGB的蓝色" class="rgbInput" />)<br/>
</div>
</div>
<div id="currColorShow" style="position:absolute;top:200px;left:10px;text-align:center;border:3px solid #AAEEEE;padding:20px;">
颜色展示区
<div style="width:120px;height:20px;line-height:20px;"></div>
<div style="width:120px;height:20px;line-height:20px;"></div>
使用Ctrl+V粘贴颜色
</div>
<div>
<dl>
<dt>使用说明</dt>
<dd>
<ol>
<li>
第一个输入框可以输入一个颜色串,格式限定为每个颜色之间用逗号隔开其它没有要求
例如:<b>"<span style="color:#55BF3B;">#55BF3B</span>", <span style="color:#DF5353;">#DF5353</span>', '<span style="color:#F3B;">#F3B</span>, "<span style="color:#5BF;">#5BF</span>"</b><br />
总之只要是<b>3</b>或<b>6</b>个16进制数就算合法颜色其中无论用什么干扰字符都可以例如<b>‘AAA&&&II20D’</b> 等价于 <span style="color:#AAA20D;"><b>‘AAA20D’</b></span>。
</li>
<li>
左边<b>第一列</b>输入框为输入16进制的颜色值,<b>相继</b>为<span style="background-color:#7798BF">背景颜色</span>(#7798BF)展示框内部文本为16进制颜色文本,<b>接着</b>是<span style="color:rgb(255,0,102);">文本颜色</span>(rgb(255,0,102))展示框内部文本为rgb颜色值,<b>最后</b>是rgb颜色值输入框,输入顺序为rgb(<span style="color:rgb(255,0,0);">红色</span>,<span style="color:rgb(0,255,0);">绿色</span>,<span style="color:rgb(0,0,255);">蓝色</span>)。
</li>
<li>
鼠标移动到颜色展示框上将自动复制颜色到剪贴板。
</li>
</ol>
</dd>
</dl>
</div>
</html>