개발

뉴스기사 스크롤 자바스크립트

에드몽단테스 2011. 4. 1. 10:23
<ul id="stoc" style="border:1px solid green;height:180px;">
    <li>aaaaaaaaaaaaaaaa</li>
    <li>bbbbbbbbbbbbbbbb</li>
    <li>cccccccccccccccc</li>
    <li>dddddddddddddddd</li>
    <li>eeeeeeeeeeeeeeee</li>
    <li>fffffffffffffffffffffffffffffffffffff</li>
</ul>


<script type="text/javascript">
function textScroll(scroll_el_id){
    this.objElement = document.getElementById(scroll_el_id);
    this.objElement.style.position = 'relative';
    this.objElement.style.overflow = 'hidden';

    this.objLi = this.objElement.getElementsByTagName('li');
    this.height = 30;
    this.num = this.objLi.length;
    this.totalHeight = this.height * this.num;
    this.scrollspeed = 2;
    this.objTop = new Array();
    this.timer = null;

    for(var i=0; i<this.num; i++){
        this.objLi[i].style.position = 'absolute';
        this.objTop[i] = this.height * i;
        this.objLi[i].style.top = this.objTop[i]+'px';
    }
}

textScroll.prototype.move = function(){
    for(var i=0; i<this.num; i++){
        this.objTop[i] = this.objTop[i] - this.scrollspeed;
        this.objLi[i].style.top = this.objTop[i]+'px';
    }
    if(this.objTop[0] % this.height == 0){
        this.jump();
    }
    else{
        clearTimeout(this.timer);
        this.timer = setTimeout(this.name+".move()", 50);
    }
}

textScroll.prototype.jump = function(){
    for(var i=0; i<this.num; i++){
        if(this.objTop[i] == this.height*(-1)){
            this.objTop[i] = this.objTop[i] + this.totalHeight;
            this.objLi[i].style.top = this.objTop[i]+'px';
        }
    }
    clearTimeout(this.timer);
    this.timer = setTimeout(this.name+".move()", 2000);
}

textScroll.prototype.start = function(){
    this.timer = setTimeout(this.name+".move()", 3000);
}
var real_search_keyword = new textScroll('stoc');
real_search_keyword.name = "real_search_keyword";
real_search_keyword.start();
</script>


반응형