웹개발
Category
JSP/Servlet
ASP
ASP.NET
PHP
웹디자인
Category
Photoshop
Illustrator
Flash
클라이언트 스크립트
Category
●
Javascript Example
Javascript
CSS3
HTML5
데이타 베이스
Category
MySQL
MSSQL
커뮤니티
Category
공지사항
개발자마당
엔지니어마당
자유마당
플래쉬게임
여행과정보
질문과 답변
Category
웹개발 질문과답변
디자인 질문과답변
자료실
Category
이미지 자료실
개발 자료실
클럽
Category
자동차클럽
하늘소리
공이랑
Javascript Example
Javascript
CSS3
HTML5
Javascript Example
제 목
[TEXT] 자연스럽게 좌-우측으로 페이딩 아웃되는 스크롤 텍스트
작성자
운영자
등록일
200808080110423
조회수
24,062
자연스럽게 좌-우측으로 페이딩 아웃되는 스크롤 텍스트 자바스크립트 소스입니다.
<SCRIPT> // CREDITS: // Right-To-Left Scroller with smooth fade-effect // By Urs Dudli and Peter Gehrig // Copyright (c) 2003 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.com // info@24fun.com // 9/16/2003 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a highly visible link to // http://www.24fun.com on the webpage // where this script will be featured // CONFIGURATION: // Go to http://www.24fun.com // and create your own text animation // with our new Text Factory. // Your messages. Add as many as you like var text=new Array() text[0]="Hello webdesigner, try our new Text Animator!" text[1]="Or create smashing online-slideshows with our Slideshow Factory." text[2]="They are the best tools to generate eyecatching special effects without any programming skills." // Add a link for each message var textlink=new Array() textlink[1]="http://www.24fun.com/downloadcenter/textanimatordemo/index.html" textlink[2]="http://www.24fun.com/downloadcenter/slideshowdemo/index.html" textlink[3]="http://www.24fun.com/downloadcenter/textanimatordemo/index.html" // Add a target for each link // Possible values are "_blank", "_self", "_top", "_parent" var texttarget=new Array() texttarget[0]="_blank" texttarget[1]="_blank" texttarget[2]="_blank" // font var textfont="Arial" // fontcolors var textfontcoloraa="#FFFFFF" var textfontcolorbb="#FFFF00" // fontcolors on mouseover (rollover) var textfontcolorrollover="#ff0000" // fontsize var textfontsize=11 // backgroundcolor var textbgcolor="#000000" // Type "bold" for bold text and "normal" for normal text var textweight="bold" // Type "italic" for italic text and ""normal" for normal text var textitalic="normal" // width and height of the scroller-box var textwidth=300 var textheight=30 // color of the scroller-box border var textbordercolor="#888888" // width of the border var textborder=1 // width of the transparent zones var translayerszone=120 // Do not edit the values below this line var textpause=0 var textitalicA="" var textitalicB="" var textweightA="<b>" var textweightB="</b>" var textdecoration="none" var textalignonly="center" var textfontsizeHTML=3 var i_text=0 var textcontent="" var thisspan="" var content="" var contentbg="" var toggle=1 var timer var scrollready=true var tablewidth var tableheight var textfontcolortoggle=new Array() var toggle=1 var step=2; var content var padding=3 var textcontentheight var textcontentwidth var translayerswidth=4 var translayersmax=Math.floor(translayerszone/translayerswidth) var translayersleftpos=0 var translayersopacity=100 var translayersfactor=100/translayersmax var translayerswidthall=translayersmax*translayerswidth var ie=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 var ns4=document.layers?1:0 var browserinfos=navigator.userAgent var opera=browserinfos.match(/Opera/) getcontent() function getcontent() { if (ie || ns6) { tablewidth=textwidth-2*textborder tableheight=textheight-2*textborder content="<table width="+tablewidth+" height="+tableheight+" cellpadding=3 cellspacing=0 border=0><tr valign=middle><td><nobr>" for (i=0;i<text.length;i++) { if (toggle==1) {textfontcolortoggle[i]=textfontcoloraa} else if (toggle==-1) {textfontcolortoggle[i]=textfontcolorbb} toggle*=-1 content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolortoggle[i]+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolortoggle[i]+"\'\">" content+=text[i] content+="</a><font color="+textbgcolor+">----------</font>" } content+="</nobr></td></tr></table>" } else { tablewidth=textwidth-2*textborder tableheight=textheight-2*textborder contentbg="<table width="+tablewidth+" height="+tableheight+"><tr><td><font color="+textbgcolor+">hi</font></td></tr></table>" content="<table height="+textheight+" cellpadding=0 cellspacing=0><tr valign=middle><td><nobr>" for (i=0;i<text.length;i++) { if (toggle==1) {textfontcolortoggle[i]=textfontcoloraa} else if (toggle==-1) {textfontcolortoggle[i]=textfontcolorbb} toggle*=-1 content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolortoggle[i]+";font-style:"+textitalic+";\" >" content+=text[i] content+="</a><font color="+textbgcolor+">----------</font>" } content+="</nobr></td></tr></table>" } } if (ns4) { toggle=1 document.write('<table cellpadding=0 cellspacing=0 border=0 height='+textheight+' width='+textwidth+'><tr><td>'); document.write('<ilayer name="marker" bgcolor="'+textbordercolor+'" width='+textwidth+' height='+textheight+'></ilayer>'); document.write('</td></tr></table>') document.write('<layer name="tickerbg" left='+textborder+' top='+textborder+' width='+(textwidth-4*textborder)+' height='+(textheight-2*textborder)+' bgcolor='+textbgcolor+' visibility=hide>'+contentbg+'</layer>') document.write('<layer left=-50000 name="ticker" onMouseOver="setscrollready(0)" onMouseOut="setscrollready(1)">loading</layer>'); } if (ie || ns6) { document.write('<table cellpadding=0 cellspacing=0 border=0 height='+textheight+' width='+textwidth+'><tr><td>'); document.write('<div id="marker" style="position:relative; width:'+textwidth+'; height:'+textheight+'" ></div>'); document.write('</td></tr></table>') if (ns6) { var tablewidth=textwidth-2*textborder var tableheight=textheight-2*textborder } else { var tablewidth=textwidth var tableheight=textheight } document.write('<div ID="roof" style="position:absolute;width:'+tablewidth+'px;height:'+tableheight+'px;border-style:solid;border-width:'+textborder+'px;border-color:'+textbordercolor+';background-color:'+textbgcolor+';visibility:hidden;overflow:hidden" onMouseOver="setscrollready(0)" onMouseOut="setscrollready(1)">') document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;visibility:hidden">'+content+'</span>') if (ie && !opera) { for (i=0;i<=translayersmax;i++) { document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>') translayersleftpos+=translayerswidth translayersopacity-=translayersfactor } translayersleftpos=tablewidth-translayersleftpos for (ii=0;ii<=translayersmax;ii++) { document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>') translayersleftpos+=translayerswidth translayersopacity+=translayersfactor } } if (ns6 && !opera) { for (i=0;i<=translayersmax-1;i++) { document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';-moz-opacity:'+translayersopacity/100+';overflow:hidden"> </span>') translayersleftpos+=translayerswidth translayersopacity-=translayersfactor if (translayersopacity<0) {translayersopacity=0.001} } translayersleftpos=tablewidth-translayersleftpos translayersopacity=0.001 for (i=0;i<=translayersmax-1;i++) { document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';-moz-opacity:'+translayersopacity/100+';"> </span>') translayersleftpos+=translayerswidth translayersopacity+=translayersfactor } } document.write('</div>') if (ns6) { document.write('<span ID="tickersize" style="position:absolute;top:0px;left:-5000px;visibility:hidden">'+content+'</span>') } } function doscroll(){ if (scrollready) { if(ns4){ document.ticker.left+=-step; if (document.ticker.left<document.marker.pageX+1*textborder) { document.ticker.clip.left+=step; } document.ticker.clip.right+=step; if(document.ticker.left<-textcontentwidth+document.marker.pageX) { document.ticker.left=textwidth+document.marker.pageX-1*textborder; document.ticker.clip.left=0 document.ticker.clip.right=0 } } if (ie) { document.all.ticker.style.posLeft+=-step if (document.all.ticker.style.posLeft<-textcontentwidth) { document.all.ticker.style.posLeft=textwidth } } if (ns6) { document.getElementById('ticker').style.left=parseInt(document.getElementById('ticker').style.left)-step if (parseInt(document.getElementById('ticker').style.left)<-textcontentwidth) { document.getElementById('ticker').style.left=textwidth } } timer=setTimeout("doscroll()",50) } else { clearTimeout(timer) } } function DL_GetElementLeft(eElement) { var nLeftPos = eElement.offsetLeft; var eParElement = eElement.offsetParent; while (eParElement != null) { nLeftPos += eParElement.offsetLeft; eParElement = eParElement.offsetParent; } return nLeftPos; } function DL_GetElementTop(eElement) { var nTopPos = eElement.offsetTop; var eParElement = eElement.offsetParent; while (eParElement != null) { nTopPos += eParElement.offsetTop; eParElement = eParElement.offsetParent; } return nTopPos; } function initscroller(){ if (ns4) { getcontent() var thisspan=eval("document.ticker") thisspan.document.clear() thisspan.document.write(content) thisspan.document.close() textcontentwidth=thisspan.clip.right document.tickerbg.left=document.marker.pageX+1*textborder document.tickerbg.top=document.marker.pageY+1*textborder thisspan.left=document.marker.pageX-1*textborder+textwidth thisspan.top=document.marker.pageY thisspan.clip.width=textcontentwidth; thisspan.clip.height=textheight; thisspan.clip.left=0 thisspan.clip.right=0 document.tickerbg.visibility="show"; thisspan.visibility="show"; } if (ie) { textcontentwidth=document.all.ticker.clientWidth document.all.roof.style.posLeft=DL_GetElementLeft(document.all.marker); document.all.roof.style.posTop=DL_GetElementTop(document.all.marker); document.all.ticker.style.posLeft=textwidth document.all.ticker.style.clip='rect(0px, '+textcontentwidth+'px, '+(textheight)+'px, 0px)'; document.all.roof.style.visibility="visible"; document.all.ticker.style.visibility="visible"; } if (ns6) { textcontentwidth=document.getElementById('tickersize').offsetWidth document.getElementById('roof').style.left=DL_GetElementLeft(document.getElementById('marker')); document.getElementById('roof').style.top=DL_GetElementTop(document.getElementById('marker')); document.getElementById('ticker').style.left=textwidth document.getElementById('ticker').clip='rect(0px, '+textcontentwidth+'px, '+(textheight)+'px, 0px)'; document.getElementById('roof').style.visibility="visible"; document.getElementById('ticker').style.visibility="visible"; } doscroll() } function setscrollready(whatanswer) { if (whatanswer==1) { scrollready=true checkscroll() } else { scrollready=false } } function checkscroll() { clearTimeout(timer) if (scrollready) { doscroll() } } function reopenpage() { history.go(0) } window.onresize=reopenpage window.onload=initscroller </script>
0
1
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
번호
제목
글쓴이
추천
조회
날짜
238
[SELECT] SELECT BOX에서 선택된 OPTION VALUE 와 TEXT 가져오기
운영자
18 /
8
82995
2008-08-09
237
[TIME] 앞으로 남은 날짜를 계산해줍니다.
운영자
0 /
0
23857
2008-08-09
236
[TIME] 타이머 자바스크립트
운영자
0 /
0
23809
2008-08-09
235
[CALENDAR] 팝업 카렌더 II
운영자
0 /
1
25357
2008-08-09
234
[TEXT] 텍스트 하이라이트 효과
운영자
0 /
0
31072
2008-08-09
233
[TEXT] 자연스럽게 좌-우측으로 페이딩 아웃되는 스크롤 텍스트
운영자
0 /
1
24062
2008-08-08
232
[CALENDAR] 심플한 달력!
운영자
0 /
0
24512
2008-08-07
231
[IMAGE] 파일 업로드시 이미지 미리보기
운영자
0 /
17
28928
2008-08-04
230
[TABLE] 마우스 오버시 테이블이 페이드 인 아웃됩니다!
운영자
2 /
0
24899
2008-08-04
229
[CALCULATOR] 심플한 계산기
운영자
0 /
0
24527
2008-08-01
228
[PASSWORD] 패스워드를 입력해야만 페이지를 볼수 있습니다.
운영자
0 /
0
26443
2008-07-31
227
[TEXT] 폼안에서 글자가 타이핑 됩니다.
운영자
0 /
0
24375
2008-07-30
226
[WINDOW] 브라우저 흔들기
운영자
0 /
0
24075
2008-07-29
225
[TABLE] 테이블 가로라인 이동
운영자
0 /
0
24877
2008-07-28
224
[TEXT] 텍스트가 페이딩 롤오버 됩니다.
운영자
0 /
0
23977
2008-07-26
223
[LINK] 링크된 텍스테에 마우스를 올리면 색상이 깜빡거립니다.
운영자
0 /
0
23766
2008-07-25
222
[TABLE] 테이블 소트시키기 II
운영자
0 /
0
24095
2008-07-21
221
[FILE] 버튼을 누르면 첨부파일 입력창 갯수가 늘어납니다.
운영자
0 /
0
23700
2008-07-20
220
[TOOLTIP] 말풍선 툴팁!
운영자
1 /
9
29802
2008-07-17
219
[TABLE] 드래그 & 드롭 테이블
운영자
0 /
4
27979
2008-07-08
218
[MENU] 슬라이딩 메뉴
운영자
0 /
0
33196
2008-07-07
217
[TABLE] 테이블 하이라이트 효과
운영자
0 /
0
24692
2008-07-05
216
[MENU] 네이버 콤보 스타일 (토글 리스트 메뉴)
운영자
0 /
0
26917
2008-07-04
215
[INPUT BOX] 정규식을 이용한 공백(SPACE) 체크하기
운영자
2 /
3
65646
2008-07-03
214
[POPUP] 간단한 풍선도움말
운영자
0 /
0
23644
2008-07-02
[1]
[2]
[3]
[4]
[5]
6
[7]
[8]
[9]
[10]
제목
내용
제목+내용
작성자