메뉴 건너뛰기

검색창 닫기

자바스크립트소스

텍스트로만 구성된 멋진 인트로 페이지

buanpc 2019.12.31 22:56 조회 수 : 1224

인삿말이 페이딩 되면서 애니메이션 되는 인트로 페이지 입니다

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Sample Script </title>
<meta name="Generator" content="EditPlus">
</head>
<body>

<!-- [1단계] 아래의 코드를 <body> 와 </body> 사이에 붙여 넣으세요 -->

<script>
// 보여줄 메세지들을 설정 하세요
var message=new Array()
message[0]="안녕하세요? 반갑습니다"
message[1]="유익한 시간 되시기 바랍니다"
message[2]="Welcome to BUANPC"
message[3]="Have a Nice Day"
message[4]="잠시후 홈페이지로 이동합니다"

// 티커의 가로세로 크기를 설정하세요
var tickerwidth=400
var tickerheight=300

// 글꼴
var tickerfont="Arial"

// 글자 크기
var tickerfontsize=5

// 글자의 색상을 지정합니다
var tickerfontcolorpre="#FFFF00"
var tickerfontcolormark="#FFFFFF"
var tickerfontcolorafter="#333333"

// 배경색상
var backgroundcolor="black"

// 단어간 지연시간 (1000 = 1 초)
var pausebetweenwords=200

// 메세지간 지연시간 (1000 = 1 초)
var pausebetweenmessages=1000

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

// 애니메이션 후 이동할 페이지
var linkurl="http://buanpc.com"

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>

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

</body>
</html>

이 게시물을
목록
쓰기 태그
위로