ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 뉴스기사 스크롤 자바스크립트
    개발 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>


    반응형

    댓글

Designed by Tistory.