본문 바로가기

javascript

즐겁게 춤을 추다가 무대에서 떨어지는 텍스트 들...

<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->

<SCRIPT LANGUAGE="JavaScript">
<!--

var mes = new Array()

mes[0]="안녕하세요?"  // 텍스트를 입력하세요
mes[1]="춤한곡 추실까요?"
mes[2]="그러다가 스테이지에서 떨어지면 어쩌죠?"
mes[3]="걱정 마세요. 다시 올라오면 되잖아요"

var path= new Array(554,9,552,10,550,13,542,13,538,13,532,10,528,9,528,9,522,7,519,8,512,9,510,11,507,13,505,16,500,17,495,18,492,17,488,15,482,9,477,9,473,9,466,12,461,17,459,19,452,20,448,21,443,18,439,15,434,9,431,9,424,8,419,9,416,11,412,12,410,15,408,17,406,19,398,19,391,20,383,19,379,17,372,14,369,10,364,9,356,7,348,8,340,9,334,11,323,13,315,17,301,18,293,17,288,12,285,10,278,7,274,7,269,9,268,9,265,12,260,17,250,17,241,17,229,16,220,10,216,9,213,9,208,9,203,9,194,14,188,16,177,16,166,16,157,14,149,13,146,8,135,7,124,6,114,9,104,14,94,16,69,16,61,15,41,15,34,15,22,16,12,16,13,15)

var stoptime=2
var textfont="굴림" // 글꼴 설정
var textsize=16
var textcolor=new Array("FF0000","0000FF","00FF00","FF00FF")
var fontweight=1
var gloweffect=0
var letterspace=12
var tickerleft=path[path.length-2]
var tickertop=path[path.length-1]
var timer
var finalxpos=tickerleft
var i_mes=0
var message=""
var i_path=0
var stoptimemilli=stoptime*10
var maxtextlength=0
var i_endposition=0
var pathx= new Array()
var ii=0
for (i=0;i<=path.length-1;i=i+2) {
        pathx[ii]=path[i]
        ii++
}
ii=0
var pathy= new Array()
for (i=1;i<=path.length-1;i=i+2) {
        pathy[ii]=path[i]
        ii++
}

if (gloweffect==1) {
        gloweffect="style='filter:glow(strength=1,color=yellow)'"
}
else {
        gloweffect=""
}
if (fontweight==1) {
        fontweight="<b>"
}
else {
        fontweight=""
}
for (i=0;i<=mes.length-1;i++) {
        if (mes[i].length>=maxtextlength) {maxtextlength=mes[i].length}
}

for (i=0;i<=mes.length-1;i++) {
        mes[i]=mes[i]+" "
}
if (document.layers) {
        if (textsize>20) {textsize=6}
        else if (textsize>20) {textsize=5}
        else if (textsize>14) {textsize=4}
        else if (textsize>10) {textsize=3}
        else if (textsize>8) {textsize=2}
        else if (textsize<=7) {textsize=1}
}
var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
        xpos[i]=5000
}
var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
        ypos[i]=5000
}

function randomizer(range) {                
        return Math.floor(range*Math.random())
}
function makesnake() {
        if (i_path<=pathx.length-1) {
                for (i=message.length-1; i>=1; i--) {
                           xpos[i]=xpos[i-1]
                        ypos[i]=ypos[i-1]
            }
                xpos[0]=pathx[i_path]
                ypos[0]=pathy[i_path]
                if (document.all) {
                        for (i=0; i<message.length-1; i++) {
                            var thisspan = eval("document.all.span"+(i)+".style")
                            thisspan.posLeft=xpos[i]+(i*letterspace)
                                thisspan.posTop=ypos[i]
                    }
                }
                if (document.layers) {
                        for (i=0; i<message.length-1; i++) {
                            var thisspan = eval("document.span"+i)
                            thisspan.left=xpos[i]+(i*letterspace)
                                thisspan.top=ypos[i]
                    }
                }
                i_path++
                timer=setTimeout("makesnake()",20)
        }
        else {
                clearTimeout(timer)
                endposition()
        }
}

function endposition() {
        if (i_endposition<=stoptimemilli) {
                if (document.all) {
                        for (i=0; i<message.length-1; i++) {
                            var thisspan = eval("document.all.span"+(i)+".style")
                                thisspan.posTop+=Math.ceil(8*Math.random())-4
                    }
                }
                if (document.layers) {
                        for (i=0; i<message.length-1; i++) {
                            var thisspan = eval("document.span"+i)
                                thisspan.top+=Math.ceil(8*Math.random())-4
                    }
                }
                i_endposition++
                timer=setTimeout("endposition()",10)
        }
        else {
                clearTimeout(timer)
                i_endposition=0
                endposition2()
        }
}

function endposition2() {
        if (i_endposition<=20) {
                if (document.all) {
                        for (i=0; i<message.length-1; i++) {
                            var thisspan = eval("document.all.span"+(i)+".style")
                                thisspan.posTop+=Math.ceil(150*Math.random())-50
                    }
                }
                if (document.layers) {
                        for (i=0; i<message.length-1; i++) {
                            var thisspan = eval("document.span"+i)
                                thisspan.top+=Math.ceil(150*Math.random())-50
                    }
                }
                i_endposition++
                timer=setTimeout("endposition2()",30)
        }
        else {
                clearTimeout(timer)
                i_endposition=0
                clearmessage()
        }
}


function clearmessage() {
                finalxpos=tickertop
                i_path=0
                for (i=0;i<=maxtextlength;i++) {
                        xpos[i]=5000
                }
                if (document.all) {
                        for (i=0;i<=maxtextlength;i++) {
                                var thisspan = eval("document.all.span"+i)
                            thisspan.innerHTML=" "
                                var thisspan = eval("document.all.span"+(i)+".style")
                            thisspan.posLeft=xpos[i]=5000
                        }
                }
                if (document.layers) {
                        for (i=0;i<=maxtextlength;i++) {
                                var thisspan = eval("document.span"+i+".document")
                            thisspan.write("<p> </p>")
                                thisspan.clear()
                                thisspan = eval("document.span"+i)
                            thisspan.left=5000
                        }
                }
                timer=setTimeout("changemessage()",2000)
}

function changemessage() {
                var messa=mes[i_mes]
                message=messa.split("")
                if (document.all) {
                        for (i=0;i<=message.length-1;i++) {
                                var thisspan = eval("document.all.span"+i)
                            thisspan.innerHTML="<p style='font-family:"+textfont+";font-size:"+textsize+";color:"+textcolor[Math.floor((textcolor.length)*Math.random())]+"'>"+fontweight+message[i]+"</p>"
                        }
                }
                if (document.layers) {
                        for (i=0; i<message.length-1; i++) {
                            var thisspan=eval("document.span"+i+".document")
                            thisspan.write("<p><font size="+textsize+" color="+textcolor[Math.floor((textcolor.length)*Math.random())]+" face="+textfont+">"+fontweight+message[i]+"</font></p>")
                                thisspan.clear()
                    }
                }
                i_mes++
                if (i_mes>=mes.length) {i_mes=0}
                finalxpos=tickertop
                i_path=0
                timer=setTimeout("makesnake()",1000)
}


//-->
</SCRIPT>

<STYLE>
A {
        color:000000;
        font-weight:bold;
}

.explainstyle {
        position:absolute;
        top:200px;
        left:8px;
        color:000000;
        font-size:8pt;
        font-family:Verdana;
}

.spanstyle {
        position:absolute;
        visibility:visible;
        left:5000px;
}
</STYLE>

</HEAD>

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

<BODY BGCOLOR="#FFFFFF"  onLoad="changemessage()">

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

<SCRIPT LANGUAGE="JavaScript">
<!--
        for (i=0;i<=maxtextlength;i++) {
            document.write("<span id='span"+i+"' class='spanstyle' "+gloweffect+">")
                document.write(message)
            document.write("</span>")
        }


//-->
</SCRIPT>