본문 바로가기

javascript

메세지를 풍차처럼 보여주는 스크립트

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

<script>

<!-- Beginning of JavaScript -

// CREDITS:
// TextWheel by Urs Dudli and Peter Gehrig
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.

// 메세지, 6개만
var message = new Array()
message[0]=" >>>> BE HAPPY"
message[1]=" >>>> DO NOT WORRY"
message[2]=" >>>> MAKE FRIENDS"
message[3]=" >>>> FALL IN LOVE"
message[4]=" >>>> TAKE IT EASY"
message[5]=" >>>> TRY IT AGAIN"

// 풍차의 가로세로
var scrollerheight=120
var scrollerwidth=360

// 글꼴
var font_family="Verdana"

// 글자크기
var font_size=20

// 풍차의 가로세로 위치
var x_textposition=10
var y_textposition=10

function initiate() {
        if (document.all) {        
                document.all.rotationstyle1.style.posLeft=x_textposition
                document.all.rotationstyle1.style.posTop=y_textposition
                
                document.all.rotationstyle2.style.posLeft=x_textposition
                document.all.rotationstyle2.style.posTop=y_textposition
                
                document.all.rotationstyle3.style.posLeft=x_textposition
                document.all.rotationstyle3.style.posTop=y_textposition
                
                document.all.rotationstyle4.style.posLeft=x_textposition
                document.all.rotationstyle4.style.posTop=y_textposition
                
                document.all.rotationstyle5.style.posLeft=x_textposition
                document.all.rotationstyle5.style.posTop=y_textposition
                
                document.all.rotationstyle6.style.posLeft=x_textposition
                document.all.rotationstyle6.style.posTop=y_textposition
                
                setmessages()
                }
}

function setmessages() {

                rotationstyle1.innerHTML=
                '<OBJECT ID="rotationobj1" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
                '<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
                '<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
                '<PARAM NAME="Line0005" VALUE="Text(\''+message[0]+'\',0, 2, 0)">'+
                '</OBJECT>'                
                
                rotationstyle2.innerHTML=
                '<OBJECT ID="rotationobj2" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
                '<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
                '<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
                '<PARAM NAME="Line0005" VALUE="Text(\''+message[1]+'\',0, 2, 0)">'+
                '</OBJECT>'        
                
                rotationstyle3.innerHTML=
                '<OBJECT ID="rotationobj3" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
                '<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
                '<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
                '<PARAM NAME="Line0005" VALUE="Text(\''+message[2]+'\',0, 2, 0)">'+
                '</OBJECT>'        
                
                rotationstyle4.innerHTML=
                '<OBJECT ID="rotationobj4" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
                '<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
                '<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
                '<PARAM NAME="Line0005" VALUE="Text(\''+message[3]+'\',0, 2, 0)">'+
                '</OBJECT>'        
                
                rotationstyle5.innerHTML=
                '<OBJECT ID="rotationobj5" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
                '<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
                '<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
                '<PARAM NAME="Line0005" VALUE="Text(\''+message[4]+'\',0, 2, 0)">'+
                '</OBJECT>'        
                
                rotationstyle6.innerHTML=
                '<OBJECT ID="rotationobj6" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height:'+2*scrollerheight+'px">'+
        '<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
        '<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
                '<PARAM NAME="Line0003" VALUE="SetFillColor(255,255,0)">'+
                '<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
                '<PARAM NAME="Line0005" VALUE="Text(\''+message[5]+'\',0, 2, 0)">'+
                '</OBJECT>'        
                
                rotationobj1.Rotate(0,0,0)
                rotationobj2.Rotate(0,60,0)
                rotationobj3.Rotate(0,120,0)
                rotationobj4.Rotate(0,180,0)
                rotationobj5.Rotate(0,240,0)
                rotationobj6.Rotate(0,300,0)
                
                startscroll()
}

function startscroll() {
        rotationobj1.Rotate(1,2,0)
                rotationobj2.Rotate(1,2,0)
                rotationobj3.Rotate(1,2,0)
                rotationobj4.Rotate(1,2,0)
                rotationobj5.Rotate(1,2,0)
                rotationobj6.Rotate(1,2,0)
                timer=setTimeout("startscroll()",20)
}


// - End of JavaScript - -->
</script>
</HEAD>

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

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


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


<SPAN ID="rotationstyle1" STYLE="position:absolute">
<OBJECT ID="rotationobj1" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</OBJECT>
</SPAN>

<SPAN ID="rotationstyle2" STYLE="position:absolute">
<OBJECT ID="rotationobj2" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</OBJECT>
</SPAN>

<SPAN ID="rotationstyle3" STYLE="position:absolute">
<OBJECT ID="rotationobj3" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</OBJECT>
</SPAN>

<SPAN ID="rotationstyle4" STYLE="position:absolute">
<OBJECT ID="rotationobj4" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</OBJECT>
</SPAN>

<SPAN ID="rotationstyle5" STYLE="position:absolute">
<OBJECT ID="rotationobj5" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</OBJECT>
</SPAN>

<SPAN ID="rotationstyle6" STYLE="position:absolute">
<OBJECT ID="rotationobj6" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
</OBJECT>
</SPAN>