라운드, 라운드박스, 테이블 둥글게
미리보기 : http://oxtag.com/html/ex/roundBorderBox.html
<html> <head> <title>라운드 박스셋</title> <script type="text/JavaScript" language="JavaScript"> function jjArrayMap(arr) { var Str = "array(\n"; for(var key in arr) { Str += "["+key+"] => "+arr[key]+"\n"; } return Str } function jjCircleInit(ratio,border,rtnArr) { var x, y, thres; if( ratio == 0 ) return [0,0]; if(!rtnArr) { var i,j; rtnArr = []; for(i=0,j=(ratio+border-2); i<=j; i++) { rtnArr[i] = [1000,0]; } } y = ratio -1; thres = -3 - (ratio + ratio); for(x=0; x < y; x++) { if( thres < 0 ) thres += 6 + (x << 2); else { thres += 10 + ((x - y) << 2); y--; } rtnArr = jjCircleBorder(rtnArr, x, ratio + border - y - 2); rtnArr = jjCircleBorder(rtnArr, y, ratio + border - x - 2); } border--; if(border > 0) rtnArr = jjCircleInit(ratio+1,border,rtnArr); return rtnArr; } function jjCircleBorder(rtnArr, x, y) { if(!rtnArr[y]) rtnArr[y] = [100, 0]; if(rtnArr[y][0] > x) rtnArr[y][0] = x; if(rtnArr[y][1] < x) rtnArr[y][1] = x; return rtnArr; } function jjRoundBoxInit(Obj, objRound, objBorder, objBorderColor, objFill) { objRound = parseInt(objRound); objBorder = parseInt(objBorder); var margin = jjCircleInit(objRound,objBorder); var piece; var topSet = document.createElement('DIV'); for(var key in margin) { piece = document.createElement('DIV'); var marginLeft = objRound + objBorder - margin[key][1] -2; piece.style.margin = '0px '+ marginLeft +'px'; var borderWidth = margin[key][1] - margin[key][0] +1; piece.style.borderLeft = borderWidth +'px solid'; piece.style.borderRight = borderWidth +'px solid'; piece.style.borderColor = objBorderColor; piece.style.backgroundColor = (margin[key][0] == 0 ? objBorderColor : objFill); piece.style.height = '1px'; piece.style.overflow = 'hidden'; topSet.appendChild(piece); } var botSet = document.createElement('DIV'); for(var i=topSet.childNodes.length - 1; i>=0; i--) { botSet.appendChild(topSet.childNodes[i].cloneNode(true)); } var content = document.createElement('DIV'); content.style.borderLeft = objBorderColor +' '+ borderWidth +'px solid'; content.style.borderRight = objBorderColor +' '+ borderWidth +'px solid'; content.style.backgroundColor = objFill; content.style.padding = '0px '+objRound+'px'; content.innerHTML = Obj.innerHTML; Obj.innerHTML = '' Obj.appendChild(topSet); Obj.appendChild(content); Obj.appendChild(botSet); } </script> </head> <body style="font-size:9pt;font-family:'맑은 고딕',Dotum,돋움;"> 라운드 박스셋 모음<BR /> <BR /> Sample 1 <div id=r10b1ffff> jjRoundBoxInit(document.getElementById('r10b1ffff'), 10, 1, '#e88', '#eee');//Object, round, border, fill </div> <script type="text/JavaScript" language="JavaScript"> jjRoundBoxInit(document.getElementById('r10b1ffff'), 10, 1, '#e88', '#eee');//Object, round, border, fill </script> <BR /><BR /> Sample 2 <div id=r10b10ffff> jjRoundBoxInit(document.getElementById('r10b10ffff'), 10, 10,'#e88', '#eee');//Object, round, border, fill </div> <script type="text/JavaScript" language="JavaScript"> jjRoundBoxInit(document.getElementById('r10b10ffff'), 10, 10,'#e88', '#eee');//Object, round, border, fill </script> <BR /><BR /> Sample 3 <div id=r5b10ffff> jjRoundBoxInit(document.getElementById('r5b10ffff'), 5, 10,'#e88', '#eee');//Object, round, border, fill </div> <script type="text/JavaScript" language="JavaScript"> jjRoundBoxInit(document.getElementById('r5b10ffff'), 5, 10,'#e88', '#eee');//Object, round, border, fill </script> <BR /><BR /> Sample 4 <div id=r20b10ffff> jjRoundBoxInit(document.getElementById('r20b10ffff'), 20, 10,'#e88', '#eee');//Object, round, border, fill </div> <script type="text/JavaScript" language="JavaScript"> jjRoundBoxInit(document.getElementById('r20b10ffff'), 20, 10,'#e88', '#eee');//Object, round, border, fill </script> <BR /><BR /> Sample 5 <div id=r20b20ffff> jjRoundBoxInit(document.getElementById('r20b20ffff'), 20, 20,'#e88', '#eee');//Object, round, border, fill </div> <script type="text/JavaScript" language="JavaScript"> jjRoundBoxInit(document.getElementById('r20b20ffff'), 20, 20,'#e88', '#eee');//Object, round, border, fill </script> 호의 휘어짐정도를 1 ~ 100 까지 더 늘릴수도 있음 테두리선의 굵기를 내맘대로 1~100까지 더 늘릴수도 있음 둘다 100x100으로 테스트하니 3초정도 걸리네요... 곡선 구하는 방법은 브렌헴(?) 알고리즘을 사용했습니다. 사용방법은 jjRoundBoxInit(적용할 오브젝트, 각도, 굵기, "테두리색상", "채울 색상"); 신의손은 멋있다. </body> </html>
'인터넷정보' 카테고리의 다른 글
프레임 경계선을 넘나드는 createPopup() (0) | 2007.10.13 |
---|---|
지정된 영역에서 각 레이어 간의 이동 효과(구글,야후) (0) | 2007.10.13 |
피부 미남 만들기 - "면도만 잘해도 완소남" (0) | 2007.10.13 |
자바스크립트 에러 상태창에 표시 (0) | 2007.10.13 |
글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2007.10.13 |
array_map을 활용한 배열 통째로 stripslashes (0) | 2007.10.13 |
내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2007.10.13 |
개인용 무료 PDF 변환 솔루션 (0) | 2007.10.13 |
HTML 하드코더 (0) | 2007.10.13 |
cut - 문자열 자르기 (0) | 2007.10.13 |
이미지 없이 라운딩 박스 표현하기1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 박스 표현하기!</title>
<style type="text/css">
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#CCCCCC}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
.box { background:#CCCCCC; padding:5px 10px; font-size:12px; font-size:12px}
</style>
</head>
<body>
<div id="container">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="box">이미지 없이 라운딩 박스 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
PNG24 반투명 지원법 (IE용) (0) | 2007.10.11 |
---|---|
JS 트리구조 메뉴 (0) | 2007.10.11 |
select 용 함수 모음 (0) | 2007.10.11 |
UTF-8로 바꾸는 법, 문자열 인코딩 바꾸기 (0) | 2007.10.11 |
IE7의 변경(오류,버그,바뀐점) (0) | 2007.10.11 |
주민/외국인 등록번호 (0) | 2007.10.11 |
인터넷익스플로러7 자동다운로드 막는 프로그램.. (0) | 2007.10.11 |
익스6, 7 경고없이 윈도우 조용히 창닫기. (0) | 2007.10.11 |
흑백사진속에 특정 부분 칼라 만들기(Desaturate) (0) | 2007.10.11 |
이미지 없이 라운딩 박스 표현하기 2 (0) | 2007.10.11 |
이미지 없이 라운딩 박스 표현하기 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 보더 표현하기!</title>
<style>
.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}
.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC;}
.r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
.r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
.box { margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px; font-size:12px}
</style>
</head>
<body>
<div id="container" style="background: #fff">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="box">이미지 없이 라운딩 보더 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
이미지 없이 라운딩 박스 표현하기1 (0) | 2007.10.11 |
---|---|
주민/외국인 등록번호 (0) | 2007.10.11 |
인터넷익스플로러7 자동다운로드 막는 프로그램.. (0) | 2007.10.11 |
익스6, 7 경고없이 윈도우 조용히 창닫기. (0) | 2007.10.11 |
흑백사진속에 특정 부분 칼라 만들기(Desaturate) (0) | 2007.10.11 |
이미지 없이 라운딩 박스 표현하기 3 (0) | 2007.10.11 |
숫자에 콤마 붙이기 (0) | 2007.10.11 |
라디오 선택된 값 가져오기 (0) | 2007.10.11 |
input text용 updown 버튼 (0) | 2007.10.11 |
입력 글자바이트 제한 textarea,textbox용 (0) | 2007.10.11 |
이미지 없이 라운딩 박스 표현하기 3
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 박스 + 보더 표현하기!</title>
<style>
.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}
.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC; background:#EEEEEE}
.r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.box{ margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px; background:#EEEEEE; font-size:12px}
</style>
</head>
<body>
<div id="container" style="background: #fff">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="box">이미지 없이 라운딩 박스 + 보더 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
주민/외국인 등록번호 (0) | 2007.10.11 |
---|---|
인터넷익스플로러7 자동다운로드 막는 프로그램.. (0) | 2007.10.11 |
익스6, 7 경고없이 윈도우 조용히 창닫기. (0) | 2007.10.11 |
흑백사진속에 특정 부분 칼라 만들기(Desaturate) (0) | 2007.10.11 |
이미지 없이 라운딩 박스 표현하기 2 (0) | 2007.10.11 |
숫자에 콤마 붙이기 (0) | 2007.10.11 |
라디오 선택된 값 가져오기 (0) | 2007.10.11 |
input text용 updown 버튼 (0) | 2007.10.11 |
입력 글자바이트 제한 textarea,textbox용 (0) | 2007.10.11 |
mysql 기본명령어 (0) | 2007.10.11 |