YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
 롤링되는 텍스트 스크롤(인기글등에 사용)
검색
멤버이름    오토
비밀번호 
 

롤링되는 텍스트 스크롤(인기글등에 사용)

페이지 정보

작성자 MintState 댓글 1건 조회 16,347회 작성일 08-11-17 11:52

본문

롤링되는 텍스트 스크롤(인기글등에 사용)


인기글이나 머 그런 거에 쓰면 좋은 스크립트.
하나씩 보여주면서 롤링됩니다. 

<style>
.cnt7 {font-size:11px; color:#999999;}
.Tkeyword7 {font-weight:bold; font-size:12px; color:#ff7396;}
</style>
<table width="180" cellpadding="0" cellspacing="0" align="center" valign="top">
	<tr>
		<td width="160">
<!--스크롤-->
		<script language="javascript">
			var scroller_height=100;		// 스크롤러의 세로 
			var html,total_area=0,wait_flag=true;	
			var bln_Mouseover = 1;
			var scrollspeed = 1;		// Scrolling 속도         
			var waitingtime = 3000;		// 멈추는 시간
			var scrolltmp = 0, scrollamount = 19;
			var scrollcontent=new Array();
			var start_panel=0, n_panel=0, i=0;

			scrollcontent[0]="<table width=200 border=0 cellpadding=0 cellspacing=0><tr><td height=20 style=padding-left:3px;><img src=0.gif width=12 height=11 align=absmiddle>&nbsp;<a href='./search.php?sfl=wr_subject&sop=and&stx=1111111'>1111111</a></td></tr></table><table width=200 border=0 cellpadding=0 cellspacing=0><tr><td height=20 style=padding-left:3px;><img src=1.gif width=12 height=11 align=absmiddle>&nbsp;<a href='./search.php?sfl=wr_subject&sop=and&stx=2222222'>2222222</a></td></tr></table><table width=200 border=0 cellpadding=0 cellspacing=0><tr><td height=20 style=padding-left:3px;><img src=2.gif width=12 height=11 align=absmiddle>&nbsp;<a href='./search.php?sfl=wr_subject&sop=and&stx=333333'>3333333</a></td></tr></table><table width=200 border=0 cellpadding=0 cellspacing=0><tr><td height=20 style=padding-left:3px;><img src=3.gif width=12 height=11 align=absmiddle>&nbsp;<a href='./search.php?sfl=wr_subject&sop=and&stx=444444'>444444</a></td></tr></table><table width=200 border=0 cellpadding=0 cellspacing=0><tr><td height=20 style=padding-left:3px;><img src=4.gif width=12 height=11 align=absmiddle>&nbsp;<a href='./search.php?sfl=wr_subject&sop=and&stx=555555'>5555555</a></td></tr></table>"

							
			function startscroll()
			{ // 스크롤 시작
				i=0;
				for (i in scrollcontent)
					n_panel++;
					
				n_panel = n_panel -1 ;
				start_panel = Math.round(Math.random()*n_panel);
				if(start_panel == 0)
				{
					i=0;
					for (i in scrollcontent) 
						insert_area(total_area, total_area++); // area 삽입
				}
				else if(start_panel == n_panel)
				{
					insert_area(start_panel, total_area);
					total_area++;
					for (i=0; i<start_panel; i++) 
					{
						insert_area(i, total_area); // area 삽입
						total_area++;
					}
				}
				else if((start_panel > 0) || (start_panel < n_panel))
				{
					insert_area(start_panel, total_area);
					total_area++;
					for (i=start_panel+1; i<=n_panel; i++) 
					{
						insert_area(i, total_area); // area 삽입
						total_area++;
					}
					for (i=0; i<start_panel; i++) 
					{
						insert_area(i, total_area); // area 삽입
						total_area++;
					}
				}
				window.setTimeout("scrolling()",waitingtime);
			}
			function scrolling(){ // 실제로 스크롤 하는 부분
				if (bln_Mouseover && wait_flag)
				{
					for (i=0;i<total_area;i++){
						tmp = document.getElementById('scroll_area'+i).style;
						tmp.top = parseInt(tmp.top)-scrollspeed;
						if (parseInt(tmp.top) <= -scroller_height){
							tmp.top = scroller_height*(total_area-1);
						}
						if (scrolltmp++ > (scrollamount-1)*scrollcontent.length){
							wait_flag=false;
							window.setTimeout("wait_flag=true;scrolltmp=0;",waitingtime);
						}
					}
				}
				window.setTimeout("scrolling()",1);
			}
			function insert_area(idx, n){ // area 삽입
				html='<div style="left: 0px; width: 100%; position: absolute; top: '+(scroller_height*n)+'px" id="scroll_area'+n+'">\n';
				html+=scrollcontent[0]+'\n';
				html+='</div>\n';
				document.write(html);
			}
		var newsVar = 0;

		</script><!--스크롤-->
		<div style="left: 0px; width: 500px; position: relative; top: 0px; height: 20px; overflow:hidden;" onMouseOver="bln_Mouseover=0" onMouseOut="bln_Mouseover=1" id="scroll_image">
		  <script>
			var no_script_flag = false ;
			if ( navigator.appName == "Microsoft Internet Explorer" )
			 {
			  if ( navigator.appVersion.indexOf ( "MSIE 4" ) > -1 )
			  {
			  document.write ( scrollcontent[0] ) ;
			  no_script_flag = true ;
			  }
			 }
			 if ( no_script_flag == false )
			  startscroll();
			</script>
	</div>
	<!--스크롤-->			
		</td>
	</tr>
</table>


다음 방법은 네이버에서 쓰는 소스를 이용한것 입니다.


위와 같이 처음꺼는 순간적으로 바뀌는 것이고 아래꺼는 위의 소스와 같이 위에서 아래로 롤링 되는 것입니다. 
<script language="JavaScript" src="./scroll.js"></script>
<div>
<div id="newPopAD" onMouseOver="quicknewstopAD.stop=true;" onMouseOut="quicknewstopAD.stop=false;"></div>
<script language="JavaScript">
quicknewstopAD = new NvChange();
quicknewstopAD.name = 'quicknewstopAD';
quicknewstopAD.divId = 'newPopAD';
quicknewstopAD.height = 22;
quicknewstopAD.width = 240;
quicknewstopAD.scrollspeed  = 3000;
quicknewstopAD.pausedelay   = 3000;
quicknewstopAD.pausemouseover = true;

quicknewstopAD.add("<a href='#'><font color='#ff3300'>000000000000</font></a>");
quicknewstopAD.add("<a href='#'><font color='#ff3300'>111111111111</font></a>");
quicknewstopAD.add("<a href='#'><font color='#ff3300'>222222222222</font></a>");
quicknewstopAD.add("<a href='#'><font color='#ff3300'>333333333333</font></a>");
quicknewstopAD.add("<a href='#'><font color='#ff3300'>444444444444</font></a>");
quicknewstopAD.add("<a href='#'><font color='#ff3300'>555555555555</font></a>");
quicknewstopAD.add("<a href='#'><font color='#ff3300'>666666666666</font></a>");
quicknewstopAD.add("<a href='#'><font color='#ff3300'>777777777777</font></a>");
quicknewstopAD.add("<a href='#'><font color='#ff3300'>888888888888</font></a>");
quicknewstopAD.add("<a href='#'><font color='#ff3300'>999999999999</font></a>");
quicknewstopAD.start();
</script>
</div>

<br />
<br />
<div>
<div id="newPop" onMouseOver="quicknewstop.stop=true;" onMouseOut="quicknewstop.stop=false;"></div>
<script language="JavaScript">
quicknewstop = new NvScroll();
quicknewstop.name = 'quicknewstop';
quicknewstop.divId = 'newPop';
quicknewstop.height = 22;
quicknewstop.width = 150;
quicknewstop.scrollspeed  = 10;
quicknewstop.pausedelay   = 3000;
quicknewstop.pausemouseover = true;

quicknewstop.add("<img src='0.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>000000000000</font></a>&nbsp;");
quicknewstop.add("<img src='1.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>111111111111</font></a>&nbsp;");
quicknewstop.add("<img src='2.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>222222222222</font></a>&nbsp;");
quicknewstop.add("<img src='3.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>333333333333</font></a>&nbsp;");
quicknewstop.add("<img src='4.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>444444444444</font></a>&nbsp;");
quicknewstop.add("<img src='5.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>555555555555</font></a>&nbsp;");
quicknewstop.add("<img src='6.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>666666666666</font></a>&nbsp;");
quicknewstop.add("<img src='7.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>777777777777</font></a>&nbsp;");
quicknewstop.add("<img src='8.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>888888888888</font></a>&nbsp;");
quicknewstop.add("<img src='9.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>999999999999</font></a>&nbsp;");
quicknewstop.start();
</script>
</div>


nvchange.js 
/*
<script language="JavaScript">
	recurt_news = new NvChange();
	recurt_news.name = "recurt_news"; recurt_news.height = 17; recurt_news.width = 400;
	recurt_news.scrollspeed = 5000; recurt_news.pausedelay = 2000; recurt_news.pausemouseover = true;
	recurt_news.add("<a href='http://land.naver.com/news/hotnews_list.php?ref=top&ref=top'>용틀임하는 ‘용산(龍山)’</a>");
	recurt_news.add("<a href='http://bank.naver.com/news/?ref=top&ref=top'>아시아펀드 웃고, 부동산 울고</a>");
	recurt_news.add("<a href='http://land.naver.com/news/photo_list.php?ref=top&ref=top'>잠실 아파트값 강남 앞질렀다</a>");
	recurt_news.add("<a href='http://stock.naver.com/news/themenews_list.nhn?id=20070831152426&ref=top&ref=top'>투자 귀재의 4분기포트폴리오</a>");
	recurt_news.add("<a href='http://stock.naver.com/news/?ref=top&ref=top'>분기말, 고점 돌파 가능할까</a>");
</script>
*/
																			
function NvChange() {
	this.version = "0.1";
	this.name = "NvChange";
	this.item = new Array();
	this.itemcount = 0;
	this.itemoffset = 0;
	this.item_i = new Array();
	this.item_icount = 0;
	this.item_ioffset = 0;
	this.currentspeed = 0;
	this.scrollspeed = 50;
	this.pausedelay = 1000;
	this.pausemouseover = false;
	this.stop = 0;
	this.height = 100;
	this.heightGap = 0;
	this.width = 100;
	this.height_i = 100;
	this.width_i = 100;
	this.stopHeight=0;
	this.count=0;
	this.flag=true;
	this.position="absolute";
	this.item_position="absolute";
	this.add = function () 
	{
		var text = arguments[0];
		this.item[this.itemcount] = text;
		this.itemcount = this.itemcount + 1;
	};
	this.addImage = function () 
	{
		var text = arguments[0];
		this.item_i[this.item_icount] = text;
		this.item_icount = this.item_icount + 1;
	};
	this.start = function () 
	{
		this.display();
		this.currentspeed = this.scrollspeed;
		obj = document.getElementById(this.name+'item0').style;
		obj.display='block';
		this.count++;
		setTimeout(this.name+'.scroll()',this.currentspeed);
	};
	this.ready = function () 
	{
		now = new Date(); ran = now % this.item_icount;
		temp = this.item_i[ran]; this.item_i[ran] = this.item_i[0]; this.item_i[0] = temp;
		this.displayImage();
		obj_i = document.getElementById(this.name+'item_i0').style;
		obj_i.display='block';
	};
	this.display = function () 
	{
		document.write('<div id="'+this.name+'" style="height:'+this.height+';width:'+this.width+';position:'+this.position+';overflow:hidden;" OnMouseOver="'+this.name+'.onmouseover();" OnMouseOut="'+this.name+'.onmouseout();">');
		for(var i = 0; i < this.itemcount; i++) {
			document.write('<div id="'+this.name+'item'+i+'"style="left:0px; width:'+this.width+';position:'+this.item_position+'; display:none; ">');
			document.write(this.item[i]);
			document.write('</div>');
		}
		document.write('</div>');
	};
	this.displayImage = function () 
	{
		document.write('<div id="'+this.name+'_i" style="left:0; height:'+this.height_i+';width:'+this.width_i+';position:relative;overflow:hidden;" OnMouseOver="'+this.name+'.onmouseover();" OnMouseOut="'+this.name+'.onmouseout();">');
		for(var i = 0; i < this.item_icount; i++) {
			document.write('<div id="'+this.name+'item_i'+i+'"style="left:0px; width:'+this.width_i+'; display:none; ">');
			document.write(this.item_i[i]);
			document.write('</div>');
		}
		document.write('</div>');
	};
	this.scroll = function () 
	{
		this.currentspeed = this.scrollspeed;
		if ( !this.stop ) {
			this.imageChange();
		}
		window.setTimeout(this.name+".scroll()",this.currentspeed);
	};
	this.imageChange = function () 
	{
		for (k = 0; k < this.item_icount; k++) {
			obj_i = document.getElementById(this.name+'item_i'+k).style;
			if (this.count % this.item_icount == k) {
				obj_i.display = 'block';
			} else {
				obj_i.display = 'none';
			}
		}
		for (k = 0; k < this.itemcount; k++) {
			obj = document.getElementById(this.name+'item'+k).style;
			if (this.count % this.itemcount == k) {
				obj.display = 'block';
			} else {
				obj.display = 'none';
			}
		}
		this.count++;
	}
	this.onmouseover = function () 
	{
		if ( this.pausemouseover ) {
			this.stop = 1;
		}
	};
	for (k = 0; k < this.item_icount; k++) {
		obj_i = document.getElementById(this.name+'item_i'+k).style;
		if (this.count % this.item_icount == k) {
			obj_i.display = 'block';
		} else {
			obj_i.display = 'none';
		}
	}
	this.onmouseout = function ()
	{
		if ( this.pausemouseover ) {
			this.stop = 0;
		}
	};
	this.up = function ()
	{
		var i;
		this.stop++;
		if ( this.itemcount <= this.itemoffset )
		this.itemoffset = this.itemoffset % this.itemcount;
		for (i = 0; i < this.item_icount; i++) {
			obj_i = document.getElementById(this.name+'item_i'+i).style;
			if ( obj_i.display == "block" ) {this.item_ioffset = i+1;obj_i.display="none";}
		}
		if (this.item_icount > 0) {
			if (this.item_ioffset < this.item_icount) {
				obj_i = document.getElementById(this.name+'item_i'+this.item_ioffset).style;
				obj_i.display = "block";
			} else {
				obj_i = document.getElementById(this.name+'item_i0').style;
				obj_i.display = "block";
			}
		}
		for (i = 0; i < this.itemcount; i++) {
			obj = document.getElementById(this.name+'item'+i).style;
			if ( obj.display == "block" ) {this.itemoffset = i+1;obj.display="none";}
		}
		if (this.itemoffset < this.itemcount) {
			obj = document.getElementById(this.name+'item'+this.itemoffset).style;
			obj.display = "block";
		} else {
			obj = document.getElementById(this.name+'item0').style;
			obj.display = "block";
		}
		window.setTimeout(this.name + ".stop--;",this.pausedelay);
	}
}
첨부 파일
파일 종류: gif scroller.gif (214byte, 42 views)
파일 종류: gif scroller2.gif (544byte, 1 views)
파일 종류: rar scroll.rar (6.3K, 13 views)

댓글목록

brownEyed님의 댓글

brownEyed 작성일

비밀글 댓글내용 확인

Total 178건 5 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
98
드레그 금지
MintState 10961 11-17
97
파일업로드 폼 검사, 파일 미리보기시 리사이즈
MintState 14289 11-17
96
Iframe 이용시 Iframe 페이지만 호출금지
MintState 12759 11-17
95
배너용 슬라이드
MintState 12578 11-17
94
책장넘기듯 이미지 보여주기
MintState 14334 11-17
93
스크롤바 따라다니는 메뉴
MintState 11840 11-17
92
별점 표시하기
MintState 18453 11-17
91
페이지에 단축키를 적용
MintState 9462 11-17
90
업로드 파일폼 검사
MintState 10360 11-17
89
문자열 제어 함수, 프로토 타입 모음
MintState 11592 11-17
88
Date 관련 함수, 프로토 타입 모음
MintState 12164 11-17
87
정규식 가이드
MintState 11678 11-17
86
셀렉박스 달력 컨트롤하기
MintState 12356 11-17
85
이미지가 없을때 대체 그림보여주기
MintState 13318 11-17
84
배너 레이어 중앙위치 기준으로 정렬
MintState 11328 11-17
83
마우스 오버시 레이어로 도움말 보이기
MintState 12698 11-17
82
마우스로 움직이는 레이어 팝업
MintState 11599 11-17
81
숫자에 컴마(,) 쓰기
MintState 13022 11-17
열람중
롤링되는 텍스트 스크롤(인기글등에 사용) 댓글+ 1개
MintState 16348 11-17
79
입력폼의 글자수 제한
MintState 11968 11-17
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2024, YesYo.com MintState. ™