-
-
자바스크립트 - 배너만들기
날짜 : 2008. 11. 07 글쓴이 : Joosarang
조회수 : 3852
추천 : 0
-
-
-
-
베너로 쓰면 좋을 스크립트
설명이 필요없네요.
일단 예제를 클릭해보시고 어떤 효과를 내는 스크립트인지 확인해 보세요.
-예제-
훌륭하지 않습니까?
자 ! 이제 소스를 살펴 봅시다.
소스(1)
<style type="text/css">
#pos1{position:absolute; top:10px; left:10px; width:450px; height:200px; font-size:50px; color:green;}
#pos2{position:absolute; top:80px; left:10px; width:450px; height:200px; font-size:25px; color:blue;}
.s{position:absolute; left:-5000px; topt:-5000px;}
A{text-decoration:none;}
</style>
일단 소스(1)을 <head>태그 안에 붙여 넣으세요.
소스(2)
<script language="JavaScript">
// 여러분이 베너에 넣을 글을 적으세요.
var message = new Array()
message[0]="안녕하세요~ 석원이의 자바훔치기입니다."
message[1]="하루종일 쓸만한 스크립트찾아 헤멨더니 눈이 너무 아프네요 *^^*"
message[2]="하지만 제홈이 이제막 홈을 만드시려눈 분들에게 많은 도움이 될껄 생각하면 피로가 싹 가십니다."
message[3]="많은 분들이 제 홈에 오셔서 수고한다는 글을 방명록에 남겨주실때마다."
message[4]="홈지기는 힘이 부쩍부쩍 난답니다."
message[5]="홈 만들다가 어려운점 있으시면 연락주세요. 시간과 실력이 허락하는한 열심히 돕겠습니다."
// 베너가 링크될 곳을 넣으세요.
var messageurl = new Array()
messageurl[0]="#"
messageurl[1]="#"
messageurl[2]="#"
messageurl[3]="#"
messageurl[4]="#"
messageurl[5]="#"
// 각 배너마다 나오는 그림파일을 설정합니다.
var messageimg = new Array()
messageimg[0]="picture/aaa1.gif"
messageimg[1]="picture/aaa2.gif"
messageimg[2]="picture/aaa3.gif"
messageimg[3]="picture/aaa4.gif"
messageimg[4]="picture/aaa5.gif"
messageimg[5]="picture/aaa6.gif"
var imgpreload=new Array()
for (i=0;i<=messageimg.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=messageimg[i]
}
// 베너의 그림위치(align)를 설정합니다.
var alignimg=new Array()
alignimg[0]="right"
alignimg[1]="left"
alignimg[2]="right"
alignimg[3]="right"
alignimg[4]="left"
alignimg[5]="right"
alignimg[6]="right"
// 베너의 글씨위치(align)을 설정
var alignmessage=new Array()
alignmessage[0]="right"
alignmessage[1]="left"
alignmessage[2]="left"
alignmessage[3]="right"
alignmessage[4]="left"
alignmessage[5]="left"
alignmessage[6]="left"
//target지정
var target_url="_blank"
// 베너의 가로 사이즈를 조정
var textwidth=300
// 베너의 세로 사이즈를 조정
var textheight=130
// 베너의 두께(border)를 조정
var borderwidth=1
// 폰트 설정
var font_size=2
var font_face="돋움"
var font_color="white"
// 베너의 배경 색갈을 설정
var bg_ticker="999933"
// 왼쪽으로 부터의 베너 거리를 설정
var x_finalpos=15
// 위쪽으로 부터의 베너 거리를 설정
var y_finalpos=15
//배너가 나타날때 화면 쪽수
var x_slices=12
// 바뀌는 메시지 사이의 시간을 설정합니다. 1500은 1.5초를 말합니다.
var pause=3000
//아래는 수정하지마시고 그냥 쓰세요.
var i_loop=0
var i_message=0
var width_slice=Math.ceil(textwidth/x_slices)
var cliptop=0
var clipbottom=textheight
var i_clipright=1
var content=""
function initiate() {
content+="<table border="+borderwidth+" cellpadding='5' width="+textwidth+" height="+textheight+">"
content+="<tr><td bgcolor="+bg_ticker+" align="+alignmessage[i_message]+">"
content+="<img hspace=5 src="+messageimg[i_message]+" align="+alignimg[i_message]+" border='0'>"
content+="<a href="+messageurl[i_message]+" target="+target_url+">"
content+="<font face="+font_face+" size="+font_size+" color="+font_color+">"
content+=message[i_message]
content+="</font></a></td></tr></table>"
if (document.all) {
for (i=0;i<=x_slices;i++) {
var thisinners=eval("s"+i)
thisinners.innerHTML=content
var thiss=eval("document.all.s"+i+".style")
thiss.posLeft=x_finalpos
thiss.posTop=y_finalpos
}
i_message++
openlamellar()
}
if (document.layers) {
for (i=0;i<=x_slices;i++) {
var thisinners=eval("document.s"+i+".document")
thisinners.write(content)
thisinners.close()
var thiss=eval("document.s"+i)
thiss.left=x_finalpos
thiss.top=y_finalpos
}
i_message++
openlamellarNN()
}
}
function openlamellar() {
clipleft=-width_slice
clipright=0
if (i_clipright<=width_slice) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.all.s"+i+".style")
thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright++
var timer=setTimeout("openlamellar()",20)
}
else {
clearTimeout(timer)
var timer=setTimeout("closelamellar()",1500)
}
}
function openlamellarNN() {
clipleft=-width_slice
clipright=0
if (i_clipright<=width_slice) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.s"+i)
thiss.clip.left=clipleft
thiss.clip.right=clipright
thiss.clip.top=cliptop
thiss.clip.bottom=clipbottom
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright++
var timer=setTimeout("openlamellarNN()",20)
}
else {
clearTimeout(timer)
var timer=setTimeout("closelamellarNN()",1500)
}
}
function closelamellar() {
clipleft=-width_slice
clipright=0
if (i_clipright>=0) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.all.s"+i+".style")
thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright--
var timer=setTimeout("closelamellar()",20)
}
else {
clearTimeout(timer)
var timer=setTimeout("changeimage()",1500)
}
}
function closelamellarNN() {
clipleft=-width_slice
clipright=0
if (i_clipright>=0) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.s"+i)
thiss.clip.left=clipleft
thiss.clip.right=clipright
thiss.clip.top=cliptop
thiss.clip.bottom=clipbottom
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright--
var timer=setTimeout("closelamellarNN()",20)
}
else {
clearTimeout(timer)
var timer=setTimeout("changeimageNN()",1500)
}
}
function changeimage() {
content=""
if (i_message>message.length-1) {i_message=0}
content+="<table border="+borderwidth+" cellpadding='5' width="+textwidth+" height="+textheight+">"
content+="<tr><td bgcolor="+bg_ticker+" align="+alignmessage[i_message]+">"
content+="<img hspace=5 src="+messageimg[i_message]+" align="+alignimg[i_message]+" border='0'>"
content+="<a href="+messageurl[i_message]+" target="+target_url+">"
content+="<font face="+font_face+" size="+font_size+" color="+font_color+">"
content+=message[i_message]
content+="</font></a></td></tr></table>"
for (i=0;i<=x_slices;i++) {
var thisinners=eval("s"+i)
thisinners.innerHTML=content
}
i_message++
openlamellar()
}
function changeimageNN() {
content=""
if (i_message>message.length-1) {i_message=0}
content+="<table border="+borderwidth+" cellpadding='5' width="+textwidth+" height="+textheight+">"
content+="<tr><td bgcolor="+bg_ticker+" align="+alignmessage[i_message]+">"
content+="<img hspace=5 src="+messageimg[i_message]+" align="+alignimg[i_message]+" border='0'>"
content+="<a href="+messageurl[i_message]+" target="+target_url+">"
content+="<font face="+font_face+" size="+font_size+" color="+font_color+">"
content+=message[i_message]
content+="</font></a></td></tr></table>"
for (i=0;i<=x_slices;i++) {
var thisinners=eval("document.s"+i+".document")
thisinners.write(content)
thisinners.close()
}
i_message++
openlamellarNN()
}
for (i=0;i<=x_slices;i++) {
document.write("<span id='s"+i+"' class='s'></span>")
}
</script>
다음으로 소스(2)를 <body>태그 안에 붙여 넣으세요.
소스(2)에 대한 설명은 소스내에 주석으로 달아두었습니다.
좀 길지만 하나하나 읽어보시면 적용하는데 큰 어려움은 없으리라 생각되네요.
그리고 마자막으로 잊지 말아야 할 것은 <body>태그는 아래 형식으로 만드셔야 된다는 겁니다.
<body onLoad="initiate();" bgcolor="#FFFFCC">
-
베너로 쓰면 좋을 스크립트
신고하기
-
-
-
-
-
댓글(0)
-
윗 글 : (11/7) 미국 최초 흑인 대통령 그는 누구인가(Joosarang)
아랫글 : 모든 자바스크립트 총정리 - 강추(Joosarang)
