텍스트에 글라데이션 효과를 적용
페이지 정보
작성자 서방님 댓글 0건 조회 110회 작성일 07-08-08 17:55본문
자바스크립으로 아래 예제처럼 텍스트에 글라데이션 효과를 적용할 수 있습니다.
색상값은
<script>document.write(textBar("Welcome to WWW.BLUEB.CO.KR. Here you will find many interesting, ", "990000", "FFFF00"));</script
><script>document.write(textBar("블루비는 웹개발자를 위한 종합 포털사이트 입니다..", "FFFF00", "007700"));
</script>
녹색블럭 설정된 부분에 시작 색상값과 끝나는 색상값을 지정해 주시면 됩니다.
<HTML>
<HEAD>
<TITLE>BLUEB</TITLE>
<head>
<script type="text/javascript">
function getColor(start, end, percent){
function hex2dec(hex){return(parseInt(hex,16));}
function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}
var pc = percent/100;
var r1 = hex2dec(start.slice(0,2)), g1=hex2dec(start.slice(2,4)), b1=hex2dec(start.slice(4,6));
var r2 = hex2dec(end.slice(0,2)), g2=hex2dec(end.slice(2,4)), b2=hex2dec(end.slice(4,6));
var r = Math.floor(r1+(pc*(r2-r1)) + .5), g= Math.floor(g1+(pc*(g2-g1)) + .5), b= Math.floor(b1+(pc*(b2-b1)) + .5);
return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}
function textBar(theText, s, e){
var str = "";
for(var x=0 ; x<theText.length ; x++)
str += "<font color='" + getColor(s, e, Math.floor(100*x/theText.length)) +"'>"+theText.charAt(x)+"</font>";
return str;
}
</script>
</head>
<body>
<div style="font-family:굴림;font-size:12;" >
<script>document.write(textBar("_____________________________________________", "000000", "FF0000"));</script
><script>document.write(textBar("_____________________________________________", "FF0000", "000000"));</script>
<br>
<br>
<script>document.write(textBar("Welcome to WWW.BLUEB.CO.KR. Here you will find many interesting, ", "990000", "FFFF00"));</script
><script>document.write(textBar("블루비는 웹개발자를 위한 종합 포털사이트 입니다..", "FFFF00", "007700"));</script>
<br>
<script>document.write(textBar("_____________________________________________", "000000", "FF0000"));</script
><script>document.write(textBar("_____________________________________________", "FF0000", "000000"));</script>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
