쓸곳이 많을거 같아서 직접 만들었습니다.
조금이라도 도움이 되시길...;
데모 : 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년 전
수고하셨습니다..
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2730 | 15년 전 | 654 | ||
| 2729 | 15년 전 | 1401 | ||
| 2728 |
 세상이미쳤어 |
15년 전 | 932 | |
| 2727 |
용다섯마리
|
15년 전 | 691 | |
| 2726 |
니콜크더만
|
15년 전 | 775 | |
| 2725 |
Insungbyun
|
15년 전 | 836 | |
| 2724 | 15년 전 | 1228 | ||
| 2723 | 15년 전 | 725 | ||
| 2722 | 15년 전 | 739 | ||
| 2721 | 15년 전 | 960 | ||
| 2720 | 15년 전 | 689 | ||
| 2719 |
 Terrorboys |
15년 전 | 1429 | |
| 2718 | 15년 전 | 1052 | ||
| 2717 |
디이자이너
|
15년 전 | 2872 | |
| 2716 |
Terrorboys |
15년 전 | 1364 | |
| 2715 | 15년 전 | 657 | ||
| 2714 |
고추장불고기
|
15년 전 | 623 | |
| 2713 | 15년 전 | 787 | ||
| 2712 | 15년 전 | 1266 | ||
| 2711 | 15년 전 | 1190 | ||
| 2710 | 15년 전 | 668 | ||
| 2709 | 15년 전 | 793 | ||
| 2708 |
TWM소프트
|
15년 전 | 982 | |
| 2707 |
 JMS007 |
15년 전 | 1216 | |
| 2706 |
JMS007 |
15년 전 | 1017 | |
| 2705 | 15년 전 | 999 | ||
| 2704 | 15년 전 | 1190 | ||
| 2703 |
JMS007 |
15년 전 | 667 | |
| 2702 |
 Acazen |
15년 전 | 654 | |
| 2701 | 15년 전 | 1060 | ||
| 2700 | 15년 전 | 648 | ||
| 2699 | 15년 전 | 1747 | ||
| 2698 | 15년 전 | 2255 | ||
| 2697 |
JMS007 |
15년 전 | 822 | |
| 2696 | 15년 전 | 821 | ||
| 2695 | 15년 전 | 1483 | ||
| 2694 |
JMS007 |
15년 전 | 889 | |
| 2693 | 15년 전 | 978 | ||
| 2692 | 15년 전 | 1390 | ||
| 2691 |
Homepix
|
15년 전 | 1550 | |
| 2690 | 15년 전 | 1654 | ||
| 2689 | 15년 전 | 1091 | ||
| 2688 |
sooram
|
15년 전 | 1759 | |
| 2687 |
terrorboys
|
15년 전 | 1571 | |
| 2686 |
진정한승리
|
15년 전 | 803 | |
| 2685 |
JMS007 |
15년 전 | 1794 | |
| 2684 |
진정한승리
|
15년 전 | 925 | |
| 2683 |
dannykim
|
15년 전 | 782 | |
| 2682 | 15년 전 | 829 | ||
| 2681 | 15년 전 | 780 | ||
| 2680 | 15년 전 | 948 | ||
| 2679 | 15년 전 | 963 | ||
| 2678 | 15년 전 | 1173 | ||
| 2677 |
 프리웹미디어 |
15년 전 | 3186 | |
| 2676 | 15년 전 | 1756 | ||
| 2675 | 15년 전 | 904 | ||
| 2674 | 15년 전 | 1606 | ||
| 2673 | 15년 전 | 773 | ||
| 2672 | 15년 전 | 909 | ||
| 2671 |
다케미카코
|
15년 전 | 1868 | |
| 2670 | 15년 전 | 1816 | ||
| 2669 | 15년 전 | 859 | ||
| 2668 |
terrorboys
|
15년 전 | 1116 | |
| 2667 | 15년 전 | 1070 | ||
| 2666 | 15년 전 | 1036 | ||
| 2665 | 15년 전 | 1222 | ||
| 2664 | 15년 전 | 954 | ||
| 2663 | 15년 전 | 979 | ||
| 2662 | 15년 전 | 900 | ||
| 2661 | 15년 전 | 1034 | ||
| 2660 | 15년 전 | 948 | ||
| 2659 | 15년 전 | 1543 | ||
| 2658 | 15년 전 | 784 | ||
| 2657 | 15년 전 | 756 | ||
| 2656 | 15년 전 | 1395 | ||
| 2655 | 15년 전 | 1294 | ||
| 2654 | 15년 전 | 1235 | ||
| 2653 | 15년 전 | 805 | ||
| 2652 | 15년 전 | 1596 | ||
| 2651 | 15년 전 | 978 | ||
| 2650 | 15년 전 | 1635 | ||
| 2649 |
windday
|
15년 전 | 1988 | |
| 2648 | 15년 전 | 1416 | ||
| 2647 | 15년 전 | 7612 | ||
| 2646 | 15년 전 | 1039 | ||
| 2645 | 15년 전 | 1262 | ||
| 2644 | 15년 전 | 991 | ||
| 2643 | 15년 전 | 1205 | ||
| 2642 | 15년 전 | 978 | ||
| 2641 | 15년 전 | 1194 | ||
| 2640 |
프리랜서개발자
|
15년 전 | 925 | |
| 2639 | 15년 전 | 2016 | ||
| 2638 | 15년 전 | 1028 | ||
| 2637 | 15년 전 | 936 | ||
| 2636 | 15년 전 | 1424 | ||
| 2635 | 15년 전 | 1316 | ||
| 2634 | 15년 전 | 1046 | ||
| 2633 | 15년 전 | 917 | ||
| 2632 | 15년 전 | 951 | ||
| 2631 | 15년 전 | 1236 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기