달력

3

« 2019/3 »

  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  
  •  
  •  

'스크롤'에 해당되는 글 1

  1. 2011.04.01 뉴스기사 스크롤 자바스크립트
2011.04.01 10:23

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


Posted by 에드몽단테스