쓸곳이 많을거 같아서 직접 만들었습니다.
조금이라도 도움이 되시길...;
데모 : 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년 전
수고하셨습니다..
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7630 | 10년 전 | 679 | ||
| 7629 |
 돼지코구뇽 |
10년 전 | 2444 | |
| 7628 | 10년 전 | 820 | ||
| 7627 |
 RINIX |
10년 전 | 1054 | |
| 7626 |
RINIX |
10년 전 | 1807 | |
| 7625 | 10년 전 | 743 | ||
| 7624 | 10년 전 | 751 | ||
| 7623 |
RINIX |
10년 전 | 3143 | |
| 7622 | 10년 전 | 755 | ||
| 7621 |
leeleeleelee
|
10년 전 | 609 | |
| 7620 | 10년 전 | 556 | ||
| 7619 | 10년 전 | 527 | ||
| 7618 | 10년 전 | 1062 | ||
| 7617 | 10년 전 | 742 | ||
| 7616 | 10년 전 | 680 | ||
| 7615 | 10년 전 | 745 | ||
| 7614 | 10년 전 | 1289 | ||
| 7613 |
RINIX |
10년 전 | 2103 | |
| 7612 | 10년 전 | 1187 | ||
| 7611 | 10년 전 | 1448 | ||
| 7610 |
RINIX |
10년 전 | 1926 | |
| 7609 |
 JRevirthuum |
10년 전 | 1381 | |
| 7608 |
mwdkim
|
10년 전 | 1154 | |
| 7607 |
JRevirthuum |
10년 전 | 1084 | |
| 7606 |
mwdkim
|
10년 전 | 3962 | |
| 7605 | 10년 전 | 710 | ||
| 7604 | 10년 전 | 1049 | ||
| 7603 | 10년 전 | 1667 | ||
| 7602 |
 nanati |
10년 전 | 1101 | |
| 7601 |
AniNest
|
10년 전 | 2818 | |
| 7600 |
port443
|
10년 전 | 1063 | |
| 7599 | 10년 전 | 968 | ||
| 7598 | 10년 전 | 1043 | ||
| 7597 | 10년 전 | 4591 | ||
| 7596 |
SeungYeon
|
10년 전 | 912 | |
| 7595 |
untitled
|
10년 전 | 2461 | |
| 7594 |
프로그래머7
|
10년 전 | 1750 | |
| 7593 |
untitled
|
10년 전 | 2393 | |
| 7592 |
untitled
|
10년 전 | 1959 | |
| 7591 |
untitled
|
10년 전 | 2697 | |
| 7590 |
아리마2001
|
10년 전 | 877 | |
| 7589 | 10년 전 | 1128 | ||
| 7588 |
JRevirthuum |
10년 전 | 2941 | |
| 7587 | 10년 전 | 1325 | ||
| 7586 | 10년 전 | 690 | ||
| 7585 | 10년 전 | 1724 | ||
| 7584 | 10년 전 | 1427 | ||
| 7583 |
leeleeleelee
|
10년 전 | 1194 | |
| 7582 |
 별을따는소년 |
10년 전 | 1155 | |
| 7581 | 10년 전 | 1384 | ||
| 7580 | 10년 전 | 1036 | ||
| 7579 |
별을따는소년 |
10년 전 | 627 | |
| 7578 | 10년 전 | 1446 | ||
| 7577 |
RINIX |
10년 전 | 1892 | |
| 7576 | 10년 전 | 1402 | ||
| 7575 |
멋진남자임
|
10년 전 | 1485 | |
| 7574 | 10년 전 | 2150 | ||
| 7573 | 10년 전 | 3288 | ||
| 7572 | 10년 전 | 783 | ||
| 7571 |
별을따는소년 |
10년 전 | 798 | |
| 7570 |
 카카오툴즈 |
10년 전 | 1348 | |
| 7569 | 10년 전 | 1568 | ||
| 7568 |
this1mg
|
10년 전 | 1069 | |
| 7567 |
 내사랑내사랑 |
10년 전 | 786 | |
| 7566 | 10년 전 | 930 | ||
| 7565 |
Angel하늘
|
10년 전 | 1035 | |
| 7564 |
seoldi
|
10년 전 | 1280 | |
| 7563 |
별을따는소년 |
10년 전 | 1420 | |
| 7562 |
멋진남자임
|
10년 전 | 2121 | |
| 7561 | 10년 전 | 744 | ||
| 7560 |
leeleeleelee
|
10년 전 | 934 | |
| 7559 | 10년 전 | 5076 | ||
| 7558 |
RinaP
|
10년 전 | 813 | |
| 7557 |
 성격파탄자 |
10년 전 | 1272 | |
| 7556 | 10년 전 | 1215 | ||
| 7555 |
hyohyojj1234
|
10년 전 | 1685 | |
| 7554 | 10년 전 | 1113 | ||
| 7553 |
senseme
|
10년 전 | 1363 | |
| 7552 |
ehdltdoit
|
10년 전 | 1458 | |
| 7551 |
 Terrorboy |
10년 전 | 1846 | |
| 7550 |
leeleeleelee
|
10년 전 | 1618 | |
| 7549 | 10년 전 | 2450 | ||
| 7548 | 10년 전 | 1857 | ||
| 7547 |
멋진남자임
|
10년 전 | 1982 | |
| 7546 | 10년 전 | 1024 | ||
| 7545 |
ILMare1003
|
10년 전 | 1315 | |
| 7544 |
내사랑내사랑 |
10년 전 | 1271 | |
| 7543 | 10년 전 | 905 | ||
| 7542 | 10년 전 | 683 | ||
| 7541 |
울라라라우
|
10년 전 | 886 | |
| 7540 | 10년 전 | 1611 | ||
| 7539 | 10년 전 | 960 | ||
| 7538 |
 Romancia |
10년 전 | 1848 | |
| 7537 | 10년 전 | 3636 | ||
| 7536 |
Gaumi
|
10년 전 | 1446 | |
| 7535 |
프로그램은어려워
|
10년 전 | 1300 | |
| 7534 |
senseme
|
10년 전 | 1222 | |
| 7533 | 10년 전 | 1224 | ||
| 7532 | 10년 전 | 893 | ||
| 7531 | 10년 전 | 2086 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기