롤링되는 텍스트 스크롤(인기글등에 사용)롤링되는 텍스트 스크롤(인기글등에 사용)
페이지 정보
작성자 MintState 댓글 1건 조회 16,153회 작성일 08-11-17 11:52본문
롤링되는 텍스트 스크롤(인기글등에 사용)
인기글이나 머 그런 거에 쓰면 좋은 스크립트.
하나씩 보여주면서 롤링됩니다.
다음 방법은 네이버에서 쓰는 소스를 이용한것 입니다.
위와 같이 처음꺼는 순간적으로 바뀌는 것이고 아래꺼는 위의 소스와 같이 위에서 아래로 롤링 되는 것입니다.
nvchange.js
인기글이나 머 그런 거에 쓰면 좋은 스크립트.
하나씩 보여주면서 롤링됩니다.
<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> <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> <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> <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> <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> <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> ");
quicknewstop.add("<img src='1.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>111111111111</font></a> ");
quicknewstop.add("<img src='2.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>222222222222</font></a> ");
quicknewstop.add("<img src='3.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>333333333333</font></a> ");
quicknewstop.add("<img src='4.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>444444444444</font></a> ");
quicknewstop.add("<img src='5.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>555555555555</font></a> ");
quicknewstop.add("<img src='6.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>666666666666</font></a> ");
quicknewstop.add("<img src='7.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>777777777777</font></a> ");
quicknewstop.add("<img src='8.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>888888888888</font></a> ");
quicknewstop.add("<img src='9.gif' style='position:relative; overflow:hidden; left:0; top:1;'> <a href='#'><font color=#e43739>999999999999</font></a> ");
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);
}
}|
|
