쓸곳이 많을거 같아서 직접 만들었습니다.
조금이라도 도움이 되시길...;
데모 : http://l2zeo.com/it/76
파일은 첨부로 해두었습니다.
--------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/css/wysiwyg.css"/>
<script type="text/javascript" src="/javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.pngFix.js"></script>
<script type="text/javascript">
var rgb;
var hsb;
function rgb_to_hex(r, g, b)/*{{{*/
{
r = r.toString(16);
if (r.length == 1)
{
r = '0' + r;
}
g = g.toString(16);
if (g.length == 1)
{
g = '0' + g;
}
b = b.toString(16);
if (b.length == 1)
{
b = '0' + b;
}
return (r + g + b).toUpperCase();
}/*}}}*/
function hex_to_rgb(hex_string, default_)/*{{{*/
{
if (default_ == undefined)
{
default_ = {r: 255, g: 0 , b: 0};
}
if (hex_string.substr(0, 1) == '#')
{
hex_string = hex_string.substr(1);
}
var r;
var g;
var b;
if (hex_string.length == 3)
{
r = hex_string.substr(0, 1);
r += r;
g = hex_string.substr(1, 1);
g += g;
b = hex_string.substr(2, 1);
b += b;
}
else if (hex_string.length == 6)
{
r = hex_string.substr(0, 2);
g = hex_string.substr(2, 2);
b = hex_string.substr(4, 2);
}
else
{
return default_;
}
r = parseInt(r, 16);
g = parseInt(g, 16);
b = parseInt(b, 16);
if (isNaN(r) || isNaN(g) || isNaN(b))
{
return default_;
}
else
{
return {r: r, g: g , b: b};
}
}/*}}}*/
function hsb_to_rgb(h, s, v)/*{{{*/
{
var red, green, blue, hue, i, var_r, var_g, var_b, var1, var2, var3;
if(s == 0)
{
red = Math.round(v * 255);
green = Math.round(v * 255);
blue = Math.round(v * 255);
}
else
{
hue = h * 6;
if(hue == 6) hue = 0;
i = Math.floor(hue);
var1 = v * (1 - s);
var2 = v * (1 - s * ( hue - i ));
var3 = v * (1 - s * (1 - (hue - i)));
switch(i)
{
case 0: var_r = v; var_g = var3; var_b = var1; break;
case 1: var_r = var2; var_g = v; var_b = var1; break;
case 2: var_r = var1; var_g = v; var_b = var3; break;
case 3: var_r = var1; var_g = var2; var_b = v; break;
case 4: var_r = var3; var_g = var1; var_b = v; break;
default: var_r = v; var_g = var1; var_b = var2; break;
}
red = Math.round(var_r * 255);
green = Math.round(var_g * 255);
blue = Math.round(var_b * 255);
}
return {r: red, g: green, b: blue};
}/*}}}*/
function rgb_to_hsb(red, green, blue)/*{{{*/
{
red = (red/255);
green = (green/255);
blue = (blue/255);
var max = Math.max(Math.max(red, green), blue);
var min = Math.min(Math.min(red, green), blue);
var delta_max = max - min;
var hue;
var saturation;
var value = max;
if (delta_max == 0)
{
hue = 0;
saturation = 0;
}
else
{
saturation = delta_max / max;
var delta_r = (((max - red)/6)+(delta_max/2))/delta_max;
var delta_g = (((max - green)/6)+(delta_max/2))/delta_max;
var delta_b = (((max - blue)/6)+(delta_max/2))/delta_max
if (red == max)
{
hue = delta_b - delta_g;
}
else if (green == max)
{
hue = (1/3) + delta_r - delta_b;
}
else if (blue == max)
{
hue = (2/3) + delta_g - delta_r;
}
if (hue < 0)
{
hue += 1;
}
if (hue > 1)
{
hue -= 1;
}
}
return {
h: hue,
s: saturation,
b: value
};
}/*}}}*/
function hsb_to_position(h, s, v)/*{{{*/
{
var p_h = Math.round((100/360)* Math.round(h*360));
var p_s = Math.round(s * 100);
var tmp_v = Math.round(v * 100);
var p_v = 100 - tmp_v;
return { bar_x: p_h, palette_x : p_s , palette_y : p_v };
}/*}}}*/
function hex_change()/*{{{*/
{
//rgb , hsb 셋팅
rgb = hex_to_rgb($("#color_hex").val(),{r: 255, g: 0, b: 0});
var tmp_hsb = rgb_to_hsb(rgb.r, rgb.g, rgb.b);
if(!hsb)
{
hsb = tmp_hsb;
}
else
{
if(tmp_hsb.b != tmp_hsb.b)
{
hsb.s = tmp_hsb.s;
}
hsb.b = tmp_hsb.b;
}
//palette background 설정
var hue_rgb = hsb_to_rgb(hsb.h, 1, 1);
var hue_hex = rgb_to_hex(hue_rgb.r,hue_rgb.g,hue_rgb.b);
$("#palette").css('background-color','#'+hue_hex);
//bar 와 palette 위치 가저오기
var position = hsb_to_position(hsb.h, hsb.s, hsb.b);
//bar_cursor 위치조정
var bar_position = $("#bar").offset().left + position.bar_x;
$("#bar_cursor").css('left',bar_position);
//palette_cursor 위치조정
var palette_left = $("#palette").offset().left + position.palette_x;
var palette_top = $("#palette").offset().top + position.palette_y;
$("#palette_cursor").css('left',palette_left).css('top',palette_top);
//칼러뷰 색갈조정
var color_hex = rgb_to_hex(rgb.r, rgb.g, rgb.b);
$("#color_view").css('background-color','#'+color_hex);
}/*}}}*/
function bar_change(x)/*{{{*/
{
var max = ($("#bar").offset().left + 100);
var min = ($("#bar").offset().left);
if(x > max)
{
x = max;
}
else if(x < min)
{
x = min;
}
hsb.h = (x - $("#bar").offset().left) / 100;
rgb = hsb_to_rgb(hsb.h, hsb.s, hsb.b);
//칼라 핵사코드 변경
var color_hex = rgb_to_hex(rgb.r,rgb.g,rgb.b);
$("#color_hex").val(color_hex);
hex_change();
}/*}}}*/
function pallete_change(x,y)/*{{{*/
{
var left_max = ($("#palette").offset().left + 100);
var left_min = ($("#palette").offset().left);
if(x > left_max)
{
x = left_max;
}
else if(x < left_min)
{
x = left_min;
}
var top_max = ($("#palette").offset().top + 100);
var top_min = ($("#palette").offset().top);
if(y > top_max)
{
y = top_max;
}
else if(y < top_min)
{
y = top_min;
}
hsb.s = (x - $("#palette").offset().left)/100;
hsb.b = (100 - (y - $("#palette").offset().top))/100;
rgb = hsb_to_rgb(hsb.h, hsb.s, hsb.b);
//칼라 핵사코드 변경
var color_hex = rgb_to_hex(rgb.r,rgb.g,rgb.b);
$("#color_hex").val(color_hex);
hex_change();
}/*}}}*/
$(document).ready(function(){
$(document).pngFix();
$("#bar_cursor").draggable({ axis:'x', containment:'parent', drag: function(e){ bar_change(e.pageX);} });
$("#palette_cursor").draggable({ containment:'parent', drag: function(e){ pallete_change(e.pageX,e.pageY); } });
$("#bar").mousedown(function(e){ bar_change(e.pageX); }).click(function(e){ bar_change(e.pageX); });
$("#palette").mousedown(function(e){ pallete_change(e.pageX,e.pageY);}).click(function(e){ pallete_change(e.pageX,e.pageY); });
$("#color_hex").change(function(){ hex_change(); } );
hex_change();
});
</script>
</head>
<body>
<table style="margin-left:40px;" cellpadding='0' cellspacing='0'>
<tr>
<td class="color_td1">
<span class="span_cursor">x</span>
</td>
</tr>
<tr>
<td class="color_td2">
<div id="bar">
<img id="bar_cursor" src="/wysiwyg_img/bar_cursor.gif" class="cursor_ab">
</div>
<div id="palette">
<img id="palette_cursor" src="/wysiwyg_img/palette_cursor.gif" class="cursor_ab">
</div>
<div class="color_desc">
<div id="color_view"></div>
<div>#<input id="color_hex" type="text" value="FF0000"></div>
</div>
<div class="color_bt_div">
<button class="color_ch_bt">choice</button>
</div>
</td>
</tr>
</table>
</body>
</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
조금이라도 도움이 되시길...;
데모 : http://l2zeo.com/it/76
파일은 첨부로 해두었습니다.
--------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/css/wysiwyg.css"/>
<script type="text/javascript" src="/javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.pngFix.js"></script>
<script type="text/javascript">
var rgb;
var hsb;
function rgb_to_hex(r, g, b)/*{{{*/
{
r = r.toString(16);
if (r.length == 1)
{
r = '0' + r;
}
g = g.toString(16);
if (g.length == 1)
{
g = '0' + g;
}
b = b.toString(16);
if (b.length == 1)
{
b = '0' + b;
}
return (r + g + b).toUpperCase();
}/*}}}*/
function hex_to_rgb(hex_string, default_)/*{{{*/
{
if (default_ == undefined)
{
default_ = {r: 255, g: 0 , b: 0};
}
if (hex_string.substr(0, 1) == '#')
{
hex_string = hex_string.substr(1);
}
var r;
var g;
var b;
if (hex_string.length == 3)
{
r = hex_string.substr(0, 1);
r += r;
g = hex_string.substr(1, 1);
g += g;
b = hex_string.substr(2, 1);
b += b;
}
else if (hex_string.length == 6)
{
r = hex_string.substr(0, 2);
g = hex_string.substr(2, 2);
b = hex_string.substr(4, 2);
}
else
{
return default_;
}
r = parseInt(r, 16);
g = parseInt(g, 16);
b = parseInt(b, 16);
if (isNaN(r) || isNaN(g) || isNaN(b))
{
return default_;
}
else
{
return {r: r, g: g , b: b};
}
}/*}}}*/
function hsb_to_rgb(h, s, v)/*{{{*/
{
var red, green, blue, hue, i, var_r, var_g, var_b, var1, var2, var3;
if(s == 0)
{
red = Math.round(v * 255);
green = Math.round(v * 255);
blue = Math.round(v * 255);
}
else
{
hue = h * 6;
if(hue == 6) hue = 0;
i = Math.floor(hue);
var1 = v * (1 - s);
var2 = v * (1 - s * ( hue - i ));
var3 = v * (1 - s * (1 - (hue - i)));
switch(i)
{
case 0: var_r = v; var_g = var3; var_b = var1; break;
case 1: var_r = var2; var_g = v; var_b = var1; break;
case 2: var_r = var1; var_g = v; var_b = var3; break;
case 3: var_r = var1; var_g = var2; var_b = v; break;
case 4: var_r = var3; var_g = var1; var_b = v; break;
default: var_r = v; var_g = var1; var_b = var2; break;
}
red = Math.round(var_r * 255);
green = Math.round(var_g * 255);
blue = Math.round(var_b * 255);
}
return {r: red, g: green, b: blue};
}/*}}}*/
function rgb_to_hsb(red, green, blue)/*{{{*/
{
red = (red/255);
green = (green/255);
blue = (blue/255);
var max = Math.max(Math.max(red, green), blue);
var min = Math.min(Math.min(red, green), blue);
var delta_max = max - min;
var hue;
var saturation;
var value = max;
if (delta_max == 0)
{
hue = 0;
saturation = 0;
}
else
{
saturation = delta_max / max;
var delta_r = (((max - red)/6)+(delta_max/2))/delta_max;
var delta_g = (((max - green)/6)+(delta_max/2))/delta_max;
var delta_b = (((max - blue)/6)+(delta_max/2))/delta_max
if (red == max)
{
hue = delta_b - delta_g;
}
else if (green == max)
{
hue = (1/3) + delta_r - delta_b;
}
else if (blue == max)
{
hue = (2/3) + delta_g - delta_r;
}
if (hue < 0)
{
hue += 1;
}
if (hue > 1)
{
hue -= 1;
}
}
return {
h: hue,
s: saturation,
b: value
};
}/*}}}*/
function hsb_to_position(h, s, v)/*{{{*/
{
var p_h = Math.round((100/360)* Math.round(h*360));
var p_s = Math.round(s * 100);
var tmp_v = Math.round(v * 100);
var p_v = 100 - tmp_v;
return { bar_x: p_h, palette_x : p_s , palette_y : p_v };
}/*}}}*/
function hex_change()/*{{{*/
{
//rgb , hsb 셋팅
rgb = hex_to_rgb($("#color_hex").val(),{r: 255, g: 0, b: 0});
var tmp_hsb = rgb_to_hsb(rgb.r, rgb.g, rgb.b);
if(!hsb)
{
hsb = tmp_hsb;
}
else
{
if(tmp_hsb.b != tmp_hsb.b)
{
hsb.s = tmp_hsb.s;
}
hsb.b = tmp_hsb.b;
}
//palette background 설정
var hue_rgb = hsb_to_rgb(hsb.h, 1, 1);
var hue_hex = rgb_to_hex(hue_rgb.r,hue_rgb.g,hue_rgb.b);
$("#palette").css('background-color','#'+hue_hex);
//bar 와 palette 위치 가저오기
var position = hsb_to_position(hsb.h, hsb.s, hsb.b);
//bar_cursor 위치조정
var bar_position = $("#bar").offset().left + position.bar_x;
$("#bar_cursor").css('left',bar_position);
//palette_cursor 위치조정
var palette_left = $("#palette").offset().left + position.palette_x;
var palette_top = $("#palette").offset().top + position.palette_y;
$("#palette_cursor").css('left',palette_left).css('top',palette_top);
//칼러뷰 색갈조정
var color_hex = rgb_to_hex(rgb.r, rgb.g, rgb.b);
$("#color_view").css('background-color','#'+color_hex);
}/*}}}*/
function bar_change(x)/*{{{*/
{
var max = ($("#bar").offset().left + 100);
var min = ($("#bar").offset().left);
if(x > max)
{
x = max;
}
else if(x < min)
{
x = min;
}
hsb.h = (x - $("#bar").offset().left) / 100;
rgb = hsb_to_rgb(hsb.h, hsb.s, hsb.b);
//칼라 핵사코드 변경
var color_hex = rgb_to_hex(rgb.r,rgb.g,rgb.b);
$("#color_hex").val(color_hex);
hex_change();
}/*}}}*/
function pallete_change(x,y)/*{{{*/
{
var left_max = ($("#palette").offset().left + 100);
var left_min = ($("#palette").offset().left);
if(x > left_max)
{
x = left_max;
}
else if(x < left_min)
{
x = left_min;
}
var top_max = ($("#palette").offset().top + 100);
var top_min = ($("#palette").offset().top);
if(y > top_max)
{
y = top_max;
}
else if(y < top_min)
{
y = top_min;
}
hsb.s = (x - $("#palette").offset().left)/100;
hsb.b = (100 - (y - $("#palette").offset().top))/100;
rgb = hsb_to_rgb(hsb.h, hsb.s, hsb.b);
//칼라 핵사코드 변경
var color_hex = rgb_to_hex(rgb.r,rgb.g,rgb.b);
$("#color_hex").val(color_hex);
hex_change();
}/*}}}*/
$(document).ready(function(){
$(document).pngFix();
$("#bar_cursor").draggable({ axis:'x', containment:'parent', drag: function(e){ bar_change(e.pageX);} });
$("#palette_cursor").draggable({ containment:'parent', drag: function(e){ pallete_change(e.pageX,e.pageY); } });
$("#bar").mousedown(function(e){ bar_change(e.pageX); }).click(function(e){ bar_change(e.pageX); });
$("#palette").mousedown(function(e){ pallete_change(e.pageX,e.pageY);}).click(function(e){ pallete_change(e.pageX,e.pageY); });
$("#color_hex").change(function(){ hex_change(); } );
hex_change();
});
</script>
</head>
<body>
<table style="margin-left:40px;" cellpadding='0' cellspacing='0'>
<tr>
<td class="color_td1">
<span class="span_cursor">x</span>
</td>
</tr>
<tr>
<td class="color_td2">
<div id="bar">
<img id="bar_cursor" src="/wysiwyg_img/bar_cursor.gif" class="cursor_ab">
</div>
<div id="palette">
<img id="palette_cursor" src="/wysiwyg_img/palette_cursor.gif" class="cursor_ab">
</div>
<div class="color_desc">
<div id="color_view"></div>
<div>#<input id="color_hex" type="text" value="FF0000"></div>
</div>
<div class="color_bt_div">
<button class="color_ch_bt">choice</button>
</div>
</td>
</tr>
</table>
</body>
</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
댓글 1개
14년 전
수고하셨습니다..
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2530 |
 l2zeo |
15년 전 | 2610 | |
| 2529 |
l2zeo |
15년 전 | 1324 | |
| 2528 | 15년 전 | 1022 | ||
| 2527 | 15년 전 | 1496 | ||
| 2526 | 15년 전 | 898 | ||
| 2525 | 15년 전 | 1195 | ||
| 2524 | 15년 전 | 1092 | ||
| 2523 | 15년 전 | 1492 | ||
| 2522 |
NY더지더지
|
15년 전 | 1631 | |
| 2521 | 15년 전 | 899 | ||
| 2520 |
l2zeo |
15년 전 | 1310 | |
| 2519 |
l2zeo |
15년 전 | 1102 | |
| 2518 | 15년 전 | 930 | ||
| 2517 |
l2zeo |
15년 전 | 1005 | |
| 2516 | 15년 전 | 1321 | ||
| 2515 | 15년 전 | 761 | ||
| 2514 | 15년 전 | 944 | ||
| 2513 | 15년 전 | 2599 | ||
| 2512 |
l2zeo |
15년 전 | 1412 | |
| 2511 |
 Acazen |
15년 전 | 783 | |
| 2510 |
l2zeo |
15년 전 | 813 | |
| 2509 | 15년 전 | 1259 | ||
| 2508 | 15년 전 | 1292 | ||
| 2507 | 15년 전 | 1544 | ||
| 2506 | 15년 전 | 1024 | ||
| 2505 | 15년 전 | 1394 | ||
| 2504 |
JMoon
|
15년 전 | 692 | |
| 2503 |
 JY소프트 |
15년 전 | 1040 | |
| 2502 | 15년 전 | 1300 | ||
| 2501 | 15년 전 | 2714 | ||
| 2500 | 15년 전 | 1078 | ||
| 2499 | 15년 전 | 1051 | ||
| 2498 | 15년 전 | 951 | ||
| 2497 |
첫만남의감격
|
15년 전 | 827 | |
| 2496 |
Acazen |
15년 전 | 837 | |
| 2495 |
 프리웹코리아 |
15년 전 | 3430 | |
| 2494 |
soulfuleyes
|
15년 전 | 2800 | |
| 2493 | 15년 전 | 1984 | ||
| 2492 | 15년 전 | 2432 | ||
| 2491 | 15년 전 | 1521 | ||
| 2490 | 15년 전 | 1063 | ||
| 2489 | 15년 전 | 1061 | ||
| 2488 | 15년 전 | 2338 | ||
| 2487 | 15년 전 | 880 | ||
| 2486 | 15년 전 | 1925 | ||
| 2485 |
못말리는크리스
|
15년 전 | 723 | |
| 2484 |
 vitamin |
15년 전 | 1875 | |
| 2483 | 15년 전 | 811 | ||
| 2482 | 15년 전 | 2485 | ||
| 2481 | 15년 전 | 726 | ||
| 2480 | 15년 전 | 1161 | ||
| 2479 | 15년 전 | 710 | ||
| 2478 |
l2zeo |
15년 전 | 2881 | |
| 2477 | 15년 전 | 1258 | ||
| 2476 | 15년 전 | 1289 | ||
| 2475 | 15년 전 | 1299 | ||
| 2474 | 15년 전 | 1362 | ||
| 2473 | 15년 전 | 975 | ||
| 2472 | 15년 전 | 1735 | ||
| 2471 | 15년 전 | 1263 | ||
| 2470 | 15년 전 | 842 | ||
| 2469 | 15년 전 | 2700 | ||
| 2468 | 15년 전 | 1089 | ||
| 2467 | 15년 전 | 1284 | ||
| 2466 | 15년 전 | 1083 | ||
| 2465 | 15년 전 | 1939 | ||
| 2464 | 15년 전 | 1948 | ||
| 2463 | 15년 전 | 1611 | ||
| 2462 | 15년 전 | 964 | ||
| 2461 | 15년 전 | 1206 | ||
| 2460 | 15년 전 | 897 | ||
| 2459 | 15년 전 | 836 | ||
| 2458 | 15년 전 | 1081 | ||
| 2457 | 15년 전 | 2443 | ||
| 2456 | 15년 전 | 2467 | ||
| 2455 | 15년 전 | 1445 | ||
| 2454 | 15년 전 | 994 | ||
| 2453 | 15년 전 | 1145 | ||
| 2452 | 15년 전 | 1154 | ||
| 2451 | 15년 전 | 1017 | ||
| 2450 | 15년 전 | 920 | ||
| 2449 | 15년 전 | 851 | ||
| 2448 | 15년 전 | 1211 | ||
| 2447 | 15년 전 | 1160 | ||
| 2446 | 15년 전 | 906 | ||
| 2445 | 15년 전 | 873 | ||
| 2444 | 15년 전 | 1050 | ||
| 2443 | 15년 전 | 1523 | ||
| 2442 | 15년 전 | 1053 | ||
| 2441 | 15년 전 | 1383 | ||
| 2440 |
l2zeo |
15년 전 | 1216 | |
| 2439 | 15년 전 | 1891 | ||
| 2438 |
 JMS007 |
15년 전 | 2950 | |
| 2437 |
JMS007 |
15년 전 | 2284 | |
| 2436 |
JMS007 |
15년 전 | 884 | |
| 2435 |
JMS007 |
15년 전 | 1892 | |
| 2434 |
JMS007 |
15년 전 | 2079 | |
| 2433 |
 WEBPD |
15년 전 | 1380 | |
| 2432 | 15년 전 | 1357 | ||
| 2431 | 15년 전 | 2624 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기