Kallery > design > 
이기연
 (sweebelle)
소개 | 작품 | 자료실 | 방명록
151
[JavaScript] 텍스트로 만든 멋진 인트로페이지
이기연 at 2007-08-08 17:05
URL http://kallery.net/s.php?i=308

 

아래의 소스를 <body></body> 사이에 넣으세요.

오렌지색으로 적힌 주석을 보시고 설정을 변경하세요.

 

<script>

// 보여줄 메세지들을 설정 하세요.

var message=new Array()

message[0]="안녕하세요? 캘러리넷 입니다."

message[1]="캘러리(Kallery)는 Korea Internet Gallery의 준말이며, 이 공간은"

message[2]="시각예술과 관련된 유용한 정보와 작가들의 작품이 전시되어 있습니다."

message[3]="보다 편리한 서비스가 되기 위해 노력중이오니 많은 관심 부탁드립니다."

message[4]="잠시 후, 캘러리 메인으로 이동합니다."

 

 

// 티커의 가로세로 크기를 설정하세요.

var tickerwidth=600

var tickerheight=300

 

// 글꼴

var tickerfont=굴림체

 

// 글자 크기

var tickerfontsize=2

 

// 글자의 색상을 지정합니다.

var tickerfontcolorpre="#333333"

var tickerfontcolormark="#999999"

var tickerfontcolorafter="#ffffff"

 

// 배경색상

var backgroundcolor=black

 

// 단어간 지연시간 (1000 = 3 초)

var pausebetweenwords=200

 

// 메세지간 지연시간 (1000 = 3 초)

var pausebetweenmessages=1000

 

// 페이드 효과후 지연시간 (1000 = 1 초)

var pauseafterfade=1000

 

// 애니메이션 후 이동할 페이지

var linkurl="http://www.kallery.net/"

 

var transparency=100

var transparencystep=5

var windowheight=0

var windowwidth=0

var x_pos=0

var y_pos=0

var i_message=-1

var messagesplit=

var i_messagesplit=0

var i_mark=0

var tickercontent

var pausefade=40

var linkurlloaded=false

var oneloopfinished=false

var ns4=document.layers?1:0

var ns6=document.getElementById&&!document.all?1:0

var ie=document.all?1:0

 

function splitmessage() {

transparency=100

if (ie) {

i_message++

if (i_message>=message.length) {oneloopfinished=true}

if (i_message>=message.length) {i_message=0}

i_mark=0

messagesplit=message[i_message].split( )

for (i=0;i<messagesplit.length;i++) {

messagesplit[i]=messagesplit[i]+

}

messagesplit[messagesplit.length]=

 

document.all.ticker.filters.alpha.opacity=transparency

if (oneloopfinished && linkurlloaded) {

document.location.href=linkurl

}

else {

runticker()

}

}

else if (ns6 || ns4) {

i_message++

if (i_message>=message.length) {document.location.href=linkurl}

else {

i_mark=0

messagesplit=message[i_message].split( )

for (i=0;i<messagesplit.length;i++) {

messagesplit[i]=messagesplit[i]+

}

messagesplit[messagesplit.length]=

if (ns6) {

document.getElementById('ticker').style.MozOpacity=transparency/100

}

runticker()

}

}

else {

document.location.href=linkurl

}

}

 

function runticker() {

if (i_mark<messagesplit.length) {

gettickercontent()

 

if (ie) {

ticker.innerHTML=tickercontent

}

if (ns6) {

document.getElementById('ticker').innerHTML=tickercontent

}

if (ns4) {

document.ticker.document.write(tickercontent)

document.ticker.document.close()

}

i_mark++

 

var tickertimer=setTimeout(runticker(),pausebetweenwords)

 

}

else {

clearTimeout(tickertimer)

setTimeout(fade(),pausebetweenmessages)

}

}

 

function fade() {

if (transparency>0){

transparency-=transparencystep

if (ie) {

document.all.ticker.filters.alpha.opacity=transparency

}

if (ns6) {

document.getElementById('ticker').style.MozOpacity=transparency/100

}

var fadetimer=setTimeout(fade(),pausefade)

}

else {

clearTimeout(fadetimer)

setTimeout(splitmessage(),pauseafterfade)

}

}

 

function gettickercontent() {

 

tickercontent=<table width=+tickerwidth+ height=+tickerheight+

cellpadding=0 cellspacing=0 border=0>

<tr valign=middle><td align=center>

tickercontent+=<font face=\+tickerfont+\ size=+tickerfontsize+

color=\+tickerfontcolorpre+\>

for (i=0;i<i_mark;i++) {

tickercontent+=messagesplit[i]

}

tickercontent+=</font>

tickercontent+=<font face=\+tickerfont+\ size=+tickerfontsize+ color=\+tickerfontcolormark+\>

tickercontent+=messagesplit[i_mark]

tickercontent+=</font>

tickercontent+=<font face=\+tickerfont+\ size=+tickerfontsize+ color=\+tickerfontcolorafter+\>

for (i=(i_mark+1);i<messagesplit.length;i++) {

tickercontent+=messagesplit[i]

}

tickercontent+=</font>

tickercontent+=</td></tr></table>

 

}

 

setposition()

function setposition() {

if (ie) {

windowheight=document.body.clientHeight

windowwidth=document.body.clientWidth

}

if (ns6) {

windowheight=window.innerHeight

windowwidth=window.innerWidth

}

if (ns4) {

windowheight=window.innerHeight

windowwidth=window.innerWidth

}

x_pos=(windowwidth-tickerwidth)/2

y_pos=(windowheight-tickerheight)/2

document.bgColor=backgroundcolor

}

function jump() {

linkurlloaded=true

}

 

if (ie) {

document.write(<div id=\ticker\

style=\position:absolute;top:+y_pos+px;left:+x_pos+px;

width:+tickerwidth+px;height:+tickerheight+px;overflow:hidden\;

filter:alpha(opacity=100);-moz-opacity:100\>)

document.write(</div>)

document.write(<iframe onLoad=\jump()\ src=+linkurl+ width=0 height=0></iframe>)

splitmessage()

}

else if (ns6) {

document.write(<div id=\ticker\

style=\position:absolute;top:+y_pos+px;left:+x_pos+px;

width:+tickerwidth+px;height:+tickerheight

+px;overflow:hidden\;-moz-opacity:100\>)

document.write(</div>)

splitmessage()

}

else if (ns4) {

document.write(<layer name=\ticker\ width=+tickerwidth+ height=+tickerheight+ top=+y_pos+ left=+x_pos+>)

document.write(tickercontent)

document.write(</layer>)

document.close()

window.onload=splitmessage

}

else {

document.location.href=linkurl

}

</script>

 

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

 

 - 첨부 파일 참고-

 

written at 2005-02-06  

- 게시물이 이동되었습니다. 출처: J@SKO-



첨부파일
    jv_smp.html [내려받기]

[권한] 읽기:비회원, 덧글:일반회원, 쓰기:이기연, 파일올리기:이기연, 관리:이기연