본문 바로가기

javascript

배경있는 텍스트 메세지가 페이드 되면서 로테이션 되는 효과

<HTML>
<HEAD>
<TITLE> Script </TITLE>

<STYLE>
body,td {font-size:12px}
</STYLE>

<!----- 1. 아래의 스크립트를 HEAD 부분에 붙여 넣으세요 -------->

<SCRIPT LANGUAGE="JavaScript">
<!--
var msg=new Array()

// 보여줄 메세지들을 차례대로 설정 합니다

msg[0]="<CENTER>JavaScript Source Bank</CENTER>";
msg[1]="<CENTER>Don\'t Worry, Be Happy</CENTER>";
msg[2]="<CENTER><a href=http://bizsrever.new21.net>http://bizsrever.new21.net</a></CENTER>";

// 변화될 색상 코드를 넣어 주세요

var colors1=new Array("ffffff", "eeeeff", "ddddff", "ccccff", "bbbbff", "aaaaff", "9999ff",
"8888ff", "7777ff", "6666ff", "5555ff", "4444ff", "3333ff","2222ff", "1111ff", "0000ff")

// colors1 과 같이 넣어줍니다
var colors2=new Array("ffffff", "ffeeee", "ffdddd", "ffcccc", "ffbbbb", "ffaaaa", "ff9999",
"ff8888", "ff7777", "ff6666", "ff5555", "ff4444", "ff3333", "ff2222", "ff1111", "ff0000")

// 텍스트 상자의 높이
high=60;

// 텍스트상자의 가로크기
wide=350;

// 보여줄 위치를 지정합니다
Xpos=10;
Ypos=10;

pad=15;

// 배경색상을 지정합니다
bgcol="black";

// 배경이미지를 설정 할 수도 있습니다

cellbg="../img1.jpg";

// 글꼴을 설정 합니다
fntFam="굴림,verdana,helvetica,arial";
fntSize=14;

// 각 메세지가 보여질 시간을 초 단위로 설정합니다
pause=2.5;

icolor=0;
mcolor=1;
imsg=0;
spWidth=wide-(2*pad);
totality=false;
glowing=true;
var theMsg="";
var cellcontent="";
pause=pause*1000;
if(cellbg.length>4){cellbg=" background="+cellbg}
else{cellbg="";}

function doPause(){
   totality=false; t=setTimeout("changecolor()",pause);
   }
function initiate(){
   getContentColor();
   getMsg();
   getCellContent();
   if(document.all){
   msgbg.innerHTML=cellcontent;
   msgfade.innerHTML=theMsg;
   msgbg.style.posLeft=Xpos;
   msgbg.style.posTop=Ypos;
   msgfade.style.posLeft=Xpos+pad;
   msgfade.style.posTop=Ypos+pad;
   t=setTimeout("changecolor()",50);}
   if(document.layers){
   document.msgbg.document.write(cellcontent);
   document.msgbg.document.close();
   document.msgfade.document.write(theMsg);
   document.msgfade.document.close();
   document.msgbg.left=Xpos;
   document.msgbg.top=Ypos;
   document.msgfade.left=Xpos+pad;
   document.msgfade.top=Ypos+pad;
   t=setTimeout("changecolor()",100);}
   }
function changecolor(){
   if(totality==true){doPause();}
   else{
   getMsg();
   getContentColor();
   if(document.all){
   msgfade.innerHTML=theMsg;
   t=setTimeout("changecolor()",50);}
   if(document.layers){
   document.msgfade.document.write(theMsg);
   document.msgfade.document.close();
   t=setTimeout("changecolor()",70);}
   }
   }
function getFadeColor(){
   icolor=icolor-1;
   if(mcolor==1){contentcolor=colors1[icolor];}
   else{contentcolor=colors2[icolor];}
   }
function getGlowColor(){
   icolor=icolor+1;
   if(mcolor==1){contentcolor=colors1[icolor];}
   else{contentcolor=colors2[icolor];}
   }
function changemsg(){
   if(imsg==msg.length-1){imsg=0; mcolor=1;}
   else if(imsg != msg.lenght-1 && mcolor==1){imsg=imsg+1; mcolor=0;}
   else{imsg=imsg+1; mcolor=1;}
   }
function getContentColor(){
   if(icolor==colors1.length-1 && glowing==true){
   getFadeColor(); glowing=false; totality=true;}
   else if(icolor < colors1.length && glowing==true){
   getGlowColor();}
   else if(icolor < 1 && glowing==false){changemsg(); getGlowColor(); glowing=true;}
   else{getFadeColor();}
   }
function getMsg() {
   theMsg="<span style='font-size:"+fntSize+"pt; font-family:"+fntFam+"; width:"+spWidth+";'>"
   theMsg+="<B><font color="+contentcolor+">"+msg[imsg]+"</font></B> "
   theMsg+="</span>"
   }
function getCellContent(){
   cellcontent="<TABLE height="+high+
   " width="+wide+" bgcolor="+bgcol+" cellpadding=0 cellspacing=0><TR><TD"+cellbg+"> </TD></TR></TABLE>"}
//  End -->
</script>

<!------------------ 여기까지 --------------->

</HEAD>

<!----- 2. BODY 태그안에 아래의 이벤트 핸들러를 붙여 넣으세요 -->

<BODY onLoad="initiate()">

<!----- 3. 원하는 위치에 아래와 같이 코드를 붙여 넣으세요 ------->

<DIV id=msgbg style="position: absolute;"></DIV>
<DIV id=msgfade style="position: absolute;"></DIV>

<!------------------ 여기까지 -------------->

</BODY>
</HTML>