웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
뉴스티커
2005.08.26 11:53
----------------------------------------------------------------------------------------
급하게 사용할때가 있어서 만들었습니다.
공개된 소스를 쓰려고 했지만.. 그동안 만들어보고 싶었던 거라 만들었습니다.
좀 디테일한 설정을 위해 매게변수가 많이 들어가네요..-_-;;
자세한 예제와 사용법은 예제파일로 확인하세요
예제 ] http://maxpond.netcci.net/etc/NewsTicker.html
----------------------------------------------------------------------------------------
<script language="javascript">
/// Script Source /////////////////////////////////////////////////////////////////////////////////////
function NewsTicker( Skin, DisplayCell, ArgvName, Elapse, MoveSpeed, ShowLength, MoveLength, MoveSize ){
NewsTicker.Bases[NewsTicker.Bases.length] = this;
this.BasesIndex = NewsTicker.Bases.length-1;
this.Skin = Skin;
this.DisplayCell = DisplayCell;
this.DisplayCell.Ticker = this;
this.ArgvName = ArgvName;
this.DisplayCell.onmouseover = new Function( "this.Ticker.Stop();" );
this.DisplayCell.onmouseout = new Function( "this.Ticker.MoveFlag = true; if( this.Ticker.ElapseTimer == null ){ this.Ticker.Move(); }" );
if( Elapse ) this.Elapse = Elapse;
if( MoveSpeed ) this.MoveSpeed = MoveSpeed;
if( ShowLength ) this.ShowLength = ShowLength;
if( MoveLength ) this.MoveLength = MoveLength;
if( MoveSize ) this.MoveSize = MoveSize;
}
NewsTicker.prototype.Skin = null;
NewsTicker.prototype.DisplayCell = null;
NewsTicker.prototype.ArgvName = null;
NewsTicker.prototype.Elapse = 1000; // 대기시간
NewsTicker.prototype.MoveSpeed = 1; // 스크롤 딜레이
NewsTicker.prototype.Skins = null;
NewsTicker.prototype.CurrentSkins = null;
NewsTicker.prototype.Current = 0;
NewsTicker.prototype.ShowLength = 5; // 미리 준비돼어 있어야할 다음 프레임갯수
NewsTicker.prototype.MoveLength = 1; // 이동할 프레임 수
NewsTicker.prototype.MoveSize= 0; // 이동할 픽셀 수
NewsTicker.Bases = [];
NewsTicker.prototype.BasesIndex = null;
NewsTicker.prototype.Timer = null;
NewsTicker.prototype.MoveFlag = true;
NewsTicker.prototype.Add = function(){
var argv = arguments;
var argc = arguments.length;
if( argc == 0 ) return;
if( this.Skins == null ) this.Skins = new Array();
var newSkin = this.Skin.cloneNode( true );
newSkin.style.display = "";
this.Skins[this.Skins.length] = newSkin;
for( var i=0; i<argc; i++ ){
newSkin.all[this.ArgvName+"["+i+"]"].innerHTML = argv[i];
}
}
NewsTicker.prototype.InitSkin = function(){
if( this.CurrentSkins == null ) this.CurrentSkins = new Array();
if( !this.Current ) this.Current = 0;
if( this.ShowLength < this.MoveLength )
this.MoveLength = this.ShowLength;
if( this.CurrentSkins.length > 0 ){
for( var i=0; i < this.MoveLength; i++ ){
this.CurrentSkins[0].removeNode( true );
this.CurrentSkins.shift();
}
}else{
this.CurrentSkins = new Array();
}
for( var i=0; i<this.CurrentSkins.length; i++ ){
this.CurrentSkins[i].style.pixelTop=0;
}
var Latest = null;
while( true ){
if( this.Current > this.Skins.length-1 ) this.Current = 0;
if( Latest == this.Current ) return;
Latest = this.Current;
this.CurrentSkins[this.CurrentSkins.length] = this.Skins[this.Current].cloneNode(true);
this.DisplayCell.appendChild( this.CurrentSkins[this.CurrentSkins.length-1] ).style.pixelTop=0;
this.Current++;
if( this.CurrentSkins.length >= this.ShowLength*2 ) break;
}
}
NewsTicker.prototype.Start = function(){
if( this.Skins.length < this.ShowLength )
return;
this.InitSkin();
this.ElapseTimer = setTimeout( "NewsTicker.Bases["+this.BasesIndex+"].Move();", this.Elapse );
}
NewsTicker.prototype.Stop = function(){
clearTimeout( this.Timer );
this.MoveFlag = false;
}
NewsTicker.prototype.Move = function(){
this.ElapseTimer = null;
if( !this.MoveFlag ) return;
if( this.CurrentSkins[this.MoveLength].offsetTop <= 0 ){
this.Start();
return;
}
var Pixel = 0;
if( this.MoveSize == 0 )
Pixel = this.CurrentSkins[this.MoveLength].offsetTop;
else{
if( (Pixel = this.CurrentSkins[this.MoveLength].offsetTop/this.MoveSize/2) < 1 ){
Pixel = 1;
}
}
for( var i=0; i<this.CurrentSkins.length; i++ ){
this.CurrentSkins[i].style.pixelTop -= Pixel;
}
if( this.ElapseTimer == null )
this.Timer = setTimeout( "NewsTicker.Bases["+this.BasesIndex+"].Move();", this.MoveSpeed );
}
</script>
<!-- 스킨 -->
<table border="1" cellpadding="4" cellspacing="0" bordercolor="#999999" style="border-collapse:collapse" width="100%">
<tr>
<td><div id="DisplayCell" style="height:39;overflow:hidden;"></div></td>
</tr>
</table>
<table border="1" cellpadding="2" cellspacing="0" bordercolor="#999999" style="border-collapse:collapse" id="NewsTickerSkin" style="display:none;position:relative" width="100%">
<tr>
<td id="argv[0]" style="font-weight:bold"></td>
<td id="argv[1]"></td>
</tr>
<tr>
<td colspan="2" id="argv[2]"></td>
</tr>
</table>
<script>
//// 시작 ////////////////////////////////////////////////////////////////////////////
var Ticker = new NewsTicker(
NewsTickerSkin, // 스킨 Obj
DisplayCell, // Viewer Obj
"argv", // DataTarget // Add() 메서드의 매게변수로 들어간 값들을 스킨의 어떤ID에 넣어줄것인가.
1000, // 대기시간
1, // 1/1000 초 마다 이동함수를 호출
1, // Viewer에서 보여질 갯수
1, // 한번에 몇프레임씩 이동하는가? ( 프레임 = 보여지는 DataRow )
6 // 몇픽셀씩 움직이는가? ( 낮을수록 빠름 )
);
// 스킨에서 argv[] 갯수에 맞게 매게변수를 넣습니다.
Ticker.Add( "주식회사건우설", "20,797,800", "[견적제출]봉화교육청 사택개" );
Ticker.Add( "현대샤인건업", "82,098,900", "예천여자고등학교환경개선사업(" );
Ticker.Add( "남해철강(주)", "", "2005 칠전리 학계철비 주" );
Ticker.Add( "(주)영웅전력", "5,250,000", "00지역 피뢰침 설치공사(긴" );
Ticker.Add( "대창건설(주)", "5,854,230,000", "이동 하수종말처리시설 건설공" );
Ticker.Add( "(주)태정산업", "47,762,000", "감곡 월정리(안골,다리골) " );
Ticker.Add( "(합자회사)미", "25,873,570", "(무정전)환호동 대한주택공사" );
Ticker.Add( "가람나무종합병", "", "2005 관매리 후박나무 보" );
Ticker.Add( "주식회사갑경", "59,150,959", "죽장 하사리 취입보 및 도수" );
Ticker.Add( "나진건설(주)", "46,300,600", "죽장 상사리 농로 확포장공사" );
Ticker.Start();
</script>
급하게 사용할때가 있어서 만들었습니다.
공개된 소스를 쓰려고 했지만.. 그동안 만들어보고 싶었던 거라 만들었습니다.
좀 디테일한 설정을 위해 매게변수가 많이 들어가네요..-_-;;
자세한 예제와 사용법은 예제파일로 확인하세요
예제 ] http://maxpond.netcci.net/etc/NewsTicker.html
----------------------------------------------------------------------------------------
<script language="javascript">
/// Script Source /////////////////////////////////////////////////////////////////////////////////////
function NewsTicker( Skin, DisplayCell, ArgvName, Elapse, MoveSpeed, ShowLength, MoveLength, MoveSize ){
NewsTicker.Bases[NewsTicker.Bases.length] = this;
this.BasesIndex = NewsTicker.Bases.length-1;
this.Skin = Skin;
this.DisplayCell = DisplayCell;
this.DisplayCell.Ticker = this;
this.ArgvName = ArgvName;
this.DisplayCell.onmouseover = new Function( "this.Ticker.Stop();" );
this.DisplayCell.onmouseout = new Function( "this.Ticker.MoveFlag = true; if( this.Ticker.ElapseTimer == null ){ this.Ticker.Move(); }" );
if( Elapse ) this.Elapse = Elapse;
if( MoveSpeed ) this.MoveSpeed = MoveSpeed;
if( ShowLength ) this.ShowLength = ShowLength;
if( MoveLength ) this.MoveLength = MoveLength;
if( MoveSize ) this.MoveSize = MoveSize;
}
NewsTicker.prototype.Skin = null;
NewsTicker.prototype.DisplayCell = null;
NewsTicker.prototype.ArgvName = null;
NewsTicker.prototype.Elapse = 1000; // 대기시간
NewsTicker.prototype.MoveSpeed = 1; // 스크롤 딜레이
NewsTicker.prototype.Skins = null;
NewsTicker.prototype.CurrentSkins = null;
NewsTicker.prototype.Current = 0;
NewsTicker.prototype.ShowLength = 5; // 미리 준비돼어 있어야할 다음 프레임갯수
NewsTicker.prototype.MoveLength = 1; // 이동할 프레임 수
NewsTicker.prototype.MoveSize= 0; // 이동할 픽셀 수
NewsTicker.Bases = [];
NewsTicker.prototype.BasesIndex = null;
NewsTicker.prototype.Timer = null;
NewsTicker.prototype.MoveFlag = true;
NewsTicker.prototype.Add = function(){
var argv = arguments;
var argc = arguments.length;
if( argc == 0 ) return;
if( this.Skins == null ) this.Skins = new Array();
var newSkin = this.Skin.cloneNode( true );
newSkin.style.display = "";
this.Skins[this.Skins.length] = newSkin;
for( var i=0; i<argc; i++ ){
newSkin.all[this.ArgvName+"["+i+"]"].innerHTML = argv[i];
}
}
NewsTicker.prototype.InitSkin = function(){
if( this.CurrentSkins == null ) this.CurrentSkins = new Array();
if( !this.Current ) this.Current = 0;
if( this.ShowLength < this.MoveLength )
this.MoveLength = this.ShowLength;
if( this.CurrentSkins.length > 0 ){
for( var i=0; i < this.MoveLength; i++ ){
this.CurrentSkins[0].removeNode( true );
this.CurrentSkins.shift();
}
}else{
this.CurrentSkins = new Array();
}
for( var i=0; i<this.CurrentSkins.length; i++ ){
this.CurrentSkins[i].style.pixelTop=0;
}
var Latest = null;
while( true ){
if( this.Current > this.Skins.length-1 ) this.Current = 0;
if( Latest == this.Current ) return;
Latest = this.Current;
this.CurrentSkins[this.CurrentSkins.length] = this.Skins[this.Current].cloneNode(true);
this.DisplayCell.appendChild( this.CurrentSkins[this.CurrentSkins.length-1] ).style.pixelTop=0;
this.Current++;
if( this.CurrentSkins.length >= this.ShowLength*2 ) break;
}
}
NewsTicker.prototype.Start = function(){
if( this.Skins.length < this.ShowLength )
return;
this.InitSkin();
this.ElapseTimer = setTimeout( "NewsTicker.Bases["+this.BasesIndex+"].Move();", this.Elapse );
}
NewsTicker.prototype.Stop = function(){
clearTimeout( this.Timer );
this.MoveFlag = false;
}
NewsTicker.prototype.Move = function(){
this.ElapseTimer = null;
if( !this.MoveFlag ) return;
if( this.CurrentSkins[this.MoveLength].offsetTop <= 0 ){
this.Start();
return;
}
var Pixel = 0;
if( this.MoveSize == 0 )
Pixel = this.CurrentSkins[this.MoveLength].offsetTop;
else{
if( (Pixel = this.CurrentSkins[this.MoveLength].offsetTop/this.MoveSize/2) < 1 ){
Pixel = 1;
}
}
for( var i=0; i<this.CurrentSkins.length; i++ ){
this.CurrentSkins[i].style.pixelTop -= Pixel;
}
if( this.ElapseTimer == null )
this.Timer = setTimeout( "NewsTicker.Bases["+this.BasesIndex+"].Move();", this.MoveSpeed );
}
</script>
<!-- 스킨 -->
<table border="1" cellpadding="4" cellspacing="0" bordercolor="#999999" style="border-collapse:collapse" width="100%">
<tr>
<td><div id="DisplayCell" style="height:39;overflow:hidden;"></div></td>
</tr>
</table>
<table border="1" cellpadding="2" cellspacing="0" bordercolor="#999999" style="border-collapse:collapse" id="NewsTickerSkin" style="display:none;position:relative" width="100%">
<tr>
<td id="argv[0]" style="font-weight:bold"></td>
<td id="argv[1]"></td>
</tr>
<tr>
<td colspan="2" id="argv[2]"></td>
</tr>
</table>
<script>
//// 시작 ////////////////////////////////////////////////////////////////////////////
var Ticker = new NewsTicker(
NewsTickerSkin, // 스킨 Obj
DisplayCell, // Viewer Obj
"argv", // DataTarget // Add() 메서드의 매게변수로 들어간 값들을 스킨의 어떤ID에 넣어줄것인가.
1000, // 대기시간
1, // 1/1000 초 마다 이동함수를 호출
1, // Viewer에서 보여질 갯수
1, // 한번에 몇프레임씩 이동하는가? ( 프레임 = 보여지는 DataRow )
6 // 몇픽셀씩 움직이는가? ( 낮을수록 빠름 )
);
// 스킨에서 argv[] 갯수에 맞게 매게변수를 넣습니다.
Ticker.Add( "주식회사건우설", "20,797,800", "[견적제출]봉화교육청 사택개" );
Ticker.Add( "현대샤인건업", "82,098,900", "예천여자고등학교환경개선사업(" );
Ticker.Add( "남해철강(주)", "", "2005 칠전리 학계철비 주" );
Ticker.Add( "(주)영웅전력", "5,250,000", "00지역 피뢰침 설치공사(긴" );
Ticker.Add( "대창건설(주)", "5,854,230,000", "이동 하수종말처리시설 건설공" );
Ticker.Add( "(주)태정산업", "47,762,000", "감곡 월정리(안골,다리골) " );
Ticker.Add( "(합자회사)미", "25,873,570", "(무정전)환호동 대한주택공사" );
Ticker.Add( "가람나무종합병", "", "2005 관매리 후박나무 보" );
Ticker.Add( "주식회사갑경", "59,150,959", "죽장 하사리 취입보 및 도수" );
Ticker.Add( "나진건설(주)", "46,300,600", "죽장 상사리 농로 확포장공사" );
Ticker.Start();
</script>
댓글 4
-
박상준
2005.09.01 11:52
화링~ ㅋㅋㅋㅋ 최소 10자 이상이라니~ 화링~만 쓸라구 구랬는데~ ㅋㅋㅋㅋ -
비와 외로움
2005.09.01 18:23
자료 감사합니다.
저 혹시 최근게시물을 티커로 사용 해 보고 싶거든요.
어떻게 해야 하나요? -
toon27
2005.11.04 15:04
아주 굿입니다.~ 감사! -
beMax
2005.11.30 08:30
최근게시물과의 연동입니다.
최근게시물용 스킨을 하나 만듭니다.
main.html----------------------------
[loop]
Ticker.Add( "[subject][comment]", "[date]" );
[/loop]
--------------------------------------
이렇게 하구요
위에 보이듯 시작부분을 완성합니다.
<script>
//// 시작 ////////////////////////////////////////////////////////////////////////////
var Ticker = new NewsTicker(
NewsTickerSkin, // 스킨 Obj
DisplayCell, // Viewer Obj
"argv", // DataTarget // Add() 메서드의 매게변수로 들어간 값들을 스킨의 어떤ID에 넣어줄것인가.
1000, // 대기시간
1, // 1/1000 초 마다 이동함수를 호출
1, // Viewer에서 보여질 갯수
1, // 한번에 몇프레임씩 이동하는가? ( 프레임 = 보여지는 DataRow )
6 // 몇픽셀씩 움직이는가? ( 낮을수록 빠름 )
);
// 스킨에서 argv[] 갯수에 맞게 매게변수를 넣습니다.
<?=print_bbs( "여기다 기존에 방식대로 매게변수들을 넣어줍니다." )?>
Ticker.Start();
</script>
제목 | 글쓴이 | 날짜 |
---|---|---|
뉴스티커 [4] | beMax | 2005.08.26 |
Rain# 머문시간 나타내기 [상태창] | Rain | 2005.08.14 |
자바스크립트 음악목록 랜덤 재생하기 | 만능천사 | 2005.08.14 |
미디어 플레이어? 난 곰플레이어야! [9] | 송재영 | 2005.07.24 |
SP2 팝업차단 무시하고 팝업띠우기?! [8] | 오길호 | 2005.07.23 |
파일 업로드 버튼 이미지로 사용하기 [1] | 행복한고니 | 2005.06.29 |
마우스 오른쪽버튼 금지시키기스크립트 [5] | 박시현 | 2005.06.26 |
링크 점선 처리 onfocus=blur() [5] | woosh | 2005.06.06 |
상태 표시줄 감지 (URL 가리고 내용 표시) 업그레이드 소스 [2] | ArⓒH | 2005.05.30 |
팝업창을 내용에 맞게 크기 자동조정하기 [2] | 김경수 | 2005.04.23 |
타켓으로 페이지 이동하는 스크립트 [2] | 로크 | 2005.04.16 |
풍선도움말 스크립트 [3] | 행복한고니 | 2005.04.11 |
플래쉬 갤러리 비슷한 자바스크립 갤러리 [13] | monozzang | 2005.04.04 |
플래시 칼라피커 두번째 버전 [1] | 행복한고니 | 2005.03.16 |
테이블선(지정위치)을 따라 이동하는 top [3] | sharim | 2005.03.14 |
마우스커서 움직임으로 이미지목록 스크롤 [1] | monozzang | 2005.03.13 |
브라우저를 동적으로 부드럽게 리사이즈 하는 소스 [4] | monozzang | 2005.03.06 |
가로 세로가 호환되는 메뉴 [3] | 이영준 | 2005.03.02 |
주소자동으로 이동 시키기(포워딩) [8] | 네츠키 | 2005.02.22 |
홈피 만들때 자주 사용되는 메타태그 모음 [18] | 김태영 | 2005.02.20 |