리스트가 반복적으로 위로 슬라이딩되어서 올라가는 소스 > 기술자료

• 목록

<script language="JavaScript">
<!--
var htmlstr = "", roll_flag=true, roll_mouse=1, roll_speed=1, roll_wait=2000, roll_temp=0, roll_height=20, roll_amount=20;
var ctnt=new Array(), ctnt_i=new Array(), startPanel=0, n_panel=0;


//스크립트원본소스입니다.
ctnt[0] = "<span><a href='http://www.yahoo.co.kr'>야후1</a></span>";
ctnt[1] = "<span><a href='http://www.yahoo.co.kr'>야후2</a></span>";
ctnt[2] = "<span><a href='http://www.yahoo.co.kr'>야후3</a></span>";
ctnt[3] = "<span><a href='http://www.yahoo.co.kr'>야후4</a></span>";
ctnt[4] = "<span><a href='http://www.yahoo.co.kr'>야후5</a></span>";


//Asp일경우는 이렇게
<%
i = 1
do until rs.eof or i > rs.pagesize
%>
ctnt[<%=i%>] = "<span><a href='content.asp?num=<%=rs("넘버필드")%>'><%=rs링크될것의제목%></a></span>";
<%
rs.movenext
i = i + 1
loop
%>

function startText(j) {
    var i;
    for (i=0; i<ctnt.length; i++) insertText(i);
    window.setTimeout("scroll()",roll_wait);
}
function scroll() {
    var i;
    if (roll_mouse && roll_flag) {
        for (i = 0; i < ctnt.length; i++) {
            roll_temp++;
            tmp = document.getElementById('pop_scroll_area'+i).style;
            tmp.top = parseInt(tmp.top) - roll_speed;
            if (parseInt(tmp.top) <= roll_height*(-1)) {
                tmp.top = roll_height*(ctnt.length-1);
            }
            if (roll_temp>(roll_amount-1)*ctnt.length) {
                roll_flag=false;
                roll_temp=0;
                window.setTimeout("roll_flag=true;roll_temp=0;",roll_wait);
            }
        }
    }
    window.setTimeout("scroll()",1);
}
function insertText(i) {
  htmlstr='<div style="left: 0px; width: 200; position: absolute; top: '+(roll_height*i+1)+'px" id="pop_scroll_area'+i+'">\n';
  htmlstr+=ctnt[i]+'\n'+'</div>\n';
  document.write(htmlstr);
}
//-->
</script>


//실제로 디스플레이되는 부분
<div style="height:37; width: 200; position: relative; overflow:hidden; margin:0;" onMouseover="roll_mouse=0" onMouseout="roll_mouse=1" id="scroll_div">
<script language="JavaScript">startText();</script>
</div>


참고자료
http://kin.naver.com/detail/detail.php?d1id=1&dir_id=10112&eid=lXp2wfXU+Y8PxyuSZppU4TKfNAf5nEiJ&qb=YXNwIG1hcnF1ZWU=&pid=fh7evloi5TGsstDubbhsss--427153&sid=SYKR2blugkkAAEUnJZQ