쓸곳이 많을거 같아서 직접 만들었습니다.
조금이라도 도움이 되시길...;
데모 : 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년 전
수고하셨습니다..
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2330 | 16년 전 | 5072 | ||
| 2329 | 16년 전 | 2307 | ||
| 2328 | 16년 전 | 3404 | ||
| 2327 | 16년 전 | 2642 | ||
| 2326 | 16년 전 | 1562 | ||
| 2325 | 16년 전 | 5363 | ||
| 2324 | 16년 전 | 2475 | ||
| 2323 | 16년 전 | 5969 | ||
| 2322 | 16년 전 | 1942 | ||
| 2321 | 16년 전 | 4020 | ||
| 2320 | 16년 전 | 3036 | ||
| 2319 |
 RINIX |
16년 전 | 2221 | |
| 2318 |
데니크레인
|
16년 전 | 2238 | |
| 2317 | 16년 전 | 4424 | ||
| 2316 | 16년 전 | 3312 | ||
| 2315 | 16년 전 | 2839 | ||
| 2314 | 16년 전 | 2967 | ||
| 2313 | 16년 전 | 2081 | ||
| 2312 | 16년 전 | 1772 | ||
| 2311 | 16년 전 | 1680 | ||
| 2310 | 16년 전 | 1400 | ||
| 2309 | 16년 전 | 1674 | ||
| 2308 | 16년 전 | 1903 | ||
| 2307 | 16년 전 | 1603 | ||
| 2306 |
 heisher |
16년 전 | 4855 | |
| 2305 | 16년 전 | 3830 | ||
| 2304 | 16년 전 | 1791 | ||
| 2303 | 16년 전 | 1535 | ||
| 2302 | 16년 전 | 2276 | ||
| 2301 | 16년 전 | 4537 | ||
| 2300 | 16년 전 | 3569 | ||
| 2299 | 16년 전 | 2590 | ||
| 2298 | 16년 전 | 4364 | ||
| 2297 | 16년 전 | 3232 | ||
| 2296 | 16년 전 | 1374 | ||
| 2295 |
heisher |
16년 전 | 1391 | |
| 2294 |
heisher |
16년 전 | 2050 | |
| 2293 | 16년 전 | 1894 | ||
| 2292 | 16년 전 | 2568 | ||
| 2291 | 16년 전 | 2246 | ||
| 2290 | 16년 전 | 1378 | ||
| 2289 | 16년 전 | 4394 | ||
| 2288 | 16년 전 | 1480 | ||
| 2287 | 16년 전 | 1794 | ||
| 2286 | 16년 전 | 2205 | ||
| 2285 |
RINIX |
16년 전 | 3849 | |
| 2284 |
RINIX |
16년 전 | 2739 | |
| 2283 |
RINIX |
16년 전 | 1497 | |
| 2282 | 16년 전 | 4028 | ||
| 2281 |
 Coolpis |
16년 전 | 1407 | |
| 2280 | 16년 전 | 1593 | ||
| 2279 | 16년 전 | 1254 | ||
| 2278 | 16년 전 | 1716 | ||
| 2277 | 16년 전 | 1619 | ||
| 2276 | 16년 전 | 1629 | ||
| 2275 | 16년 전 | 1428 | ||
| 2274 | 16년 전 | 2191 | ||
| 2273 | 16년 전 | 1842 | ||
| 2272 |
RINIX |
16년 전 | 1990 | |
| 2271 | 16년 전 | 2200 | ||
| 2270 |
a1system
|
16년 전 | 1490 | |
| 2269 | 16년 전 | 2321 | ||
| 2268 | 16년 전 | 2265 | ||
| 2267 | 16년 전 | 4543 | ||
| 2266 |
 TopSchooL |
16년 전 | 1300 | |
| 2265 | 16년 전 | 1058 | ||
| 2264 |
잠자리똥꾸멍
|
16년 전 | 2014 | |
| 2263 |
태양의서쪽
|
16년 전 | 1984 | |
| 2262 |
태양의서쪽
|
16년 전 | 1523 | |
| 2261 |
태양의서쪽
|
16년 전 | 2049 | |
| 2260 |
 똥싼너구리 |
16년 전 | 2280 | |
| 2259 | 16년 전 | 1392 | ||
| 2258 | 16년 전 | 1741 | ||
| 2257 | 16년 전 | 1922 | ||
| 2256 | 16년 전 | 1015 | ||
| 2255 | 16년 전 | 1694 | ||
| 2254 | 16년 전 | 1409 | ||
| 2253 | 16년 전 | 1925 | ||
| 2252 |
freedays
|
16년 전 | 1329 | |
| 2251 | 16년 전 | 2204 | ||
| 2250 | 16년 전 | 1883 | ||
| 2249 | 16년 전 | 5875 | ||
| 2248 | 16년 전 | 1913 | ||
| 2247 | 16년 전 | 3687 | ||
| 2246 | 16년 전 | 1469 | ||
| 2245 |
RINIX |
16년 전 | 1763 | |
| 2244 |
RINIX |
16년 전 | 2077 | |
| 2243 | 16년 전 | 2614 | ||
| 2242 | 16년 전 | 2311 | ||
| 2241 | 16년 전 | 2760 | ||
| 2240 | 16년 전 | 3001 | ||
| 2239 | 16년 전 | 3031 | ||
| 2238 |
똥싼너구리 |
16년 전 | 1828 | |
| 2237 |
똥싼너구리 |
16년 전 | 1544 | |
| 2236 |
똥싼너구리 |
16년 전 | 1420 | |
| 2235 | 16년 전 | 1732 | ||
| 2234 | 16년 전 | 1213 | ||
| 2233 | 16년 전 | 1964 | ||
| 2232 |
똥싼너구리 |
16년 전 | 1737 | |
| 2231 | 16년 전 | 1610 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기