본문 바로가기

javascript

Fade Text Effect -- 문장이 차례로 나타났다 사라지는 스크립트

<!--1. 아래 스크립트를 HEAD 부분에 복사해 넣으세요. 없으면 그냥 두세요-->

<script language="JavaScript1.2">
ie=document.all?1:0
n=document.layers?1:0
betweendelay=2000 //지연시간 mili second
var loop=1
FontFace='arial,helvetiva' //글꼴
FontSize=12 //글꼴크기
fadeback=1 // 0일 때는 fode on후 바로 off 1일 때는 fade off

colors=new Array()
colors[0]='#FFFFFF'          // 페이지의 배경색에 따라 적당히 조정하세요
colors[1]='#EEEEEE'
colors[2]='#CCCCCC'
colors[3]='#999999'
colors[4]='#666666'
colors[5]='#333333'
colors[6]='#000000'

news=new Array()
news[0]=new Array()
news[0]["text"]="울밑에선 봉선화야"
news[0]["link"]="http://www.jasko.co.kr"

news[1]=new Array()
news[1]["text"]="네 모양이 처량하다"
news[1]["link"]="http://www.jasko.co.kr"

news[2]=new Array()
news[2]["text"]="길고긴 날 여름철에"
news[2]["link"]="http://www.jasko.co.kr"

news[3]=new Array()
news[3]["text"]="아름답게 피었다가"
news[3]["link"]="http://www.jasko.co.kr"

fadeInit=new Function("oNews=new makeObj('divNews','divCont'); fadeNews(0)")
function makeObj(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'
    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
    this.writeref=(n) ? eval(nest+'document.'+obj+'.document'):eval(obj);  
this.fadeIt=b_fadeIt
    this.obj = obj + "Object";  eval(this.obj + "=this")
}
function b_fadeIt(text,link,font,size,speed,fn,num,c0,c1,c2,c3,c4,c5,c6){
if(num<arguments.length && arguments[num]!=0){
  writetext='<a href="'+link+'" style="text-decoration:none; font-size:'+size+'px">'
  +'<font face="'+font+'" color="'+arguments[num]+'">'+text+'</font></a>'
  if(n){this.writeref.write(writetext); this.writeref.close()}
  if(ie) this.writeref.innerHTML=writetext  
  num++
  setTimeout(this.obj+'.fadeIt("'+text+'","'+link+'","'+font+'",'+size+','+speed+',"'
  +fn+'",'+num+',"'+c0+'","'+c1+'","'+c2+'","'+c3+'","'+c4+'","'+c5+'","'+c6+'")',speed)
}else setTimeout('eval('+fn+')',betweendelay)
}
function fadeNews(num){
if(num<news.length){
  fn=fadeback?'fadeBack('+num+')':'fadeNews('+(num+1)+')';
  oNews.fadeIt(news[num]["text"],news[num]["link"],FontFace,FontSize,100,fn,7,
  colors[0],colors[1],colors[2],colors[3],colors[4],colors[5],colors[6])
}else if(loop)fadeNews(0)
}
function fadeBack(num){
if(num>=0){
  oNews.fadeIt(news[num]["text"],news[num]["link"],FontFace,FontSize,100,'fadeNews('+(num+1)
  +')',7,colors[6],colors[5],colors[4],colors[3],colors[2],colors[1],colors[0])
}
}
onload=fadeInit;
</script>


</HEAD>
<!--2. BODY 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->


<BODY BGCOLOR="#FFFFFF">

<!--3. BODY 부분에 아래의 스크립트를 복사해 넣으세요-->

<p><div id="divNews" align=center style="position:absolute; left:100px; top:100px; width:350px; height:200px; z-index:1; border-width:1px; border-style:none;">

<script language="JavaScript">
   if(document.all || document.layers) document.write("dummy text, dummy"
     +"text, you can place you fist news or a welcome msg or something here."
     +"If you place these layers inside a table or something you can also"
     +"use this as the msg that browsers that doesn't suport dhtml will see.")
</script>

<!--위 스크립트는 레이어 지원하지 않는 브라우저인 경우 나타낼 문자열 입니다-->

</div> </p>