웹마스터 팁

뉴스티커

2005.08.26 11:53

beMax

----------------------------------------------------------------------------------------
급하게 사용할때가 있어서 만들었습니다.
공개된 소스를 쓰려고 했지만.. 그동안 만들어보고 싶었던 거라 만들었습니다.
좀 디테일한 설정을 위해 매게변수가 많이 들어가네요..-_-;;
자세한 예제와 사용법은 예제파일로 확인하세요

예제 ] 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>