이야기 마을

음...어디서 주서온건지......음...네이버던가....-0-;;;;;;;
할튼 뭐 스무스 스크롤이라 해야하나??
네이버 딱 보면 인기검색어 올라가는거 같이 되는 스크롤....음...네이번가 보다...-0-;;;;


========================================================





//서브 화면 이벤트에서 사용 여러항목 순차적 스크롤 smooth scroll? marquee scroll?
function smScroll(layername) {
    this.name = "smScroll";
    this.divId = layername;
    this.item = new Array();
    this.itemcount = 0;
    this.currentspeed = 0;
    this.scrollspeed = 50;
    this.pausedelay = 1000;
    this.pausemouseover = false;
    this.stop = false;
    this.height = 100;
    this.width = 100;
    this.stopHeight=0;
    this.i=0;
    this.reloadData = 0;

    this.add = function () {
        var text = arguments[0];
        this.item[this.itemcount] = text;
        this.itemcount = this.itemcount + 1;
    };

    this.start = function () {
        if ( this.itemcount == 1 ) {
            this.add(this.item[0]);
        }
        this.display();
        this.currentspeed = this.scrollspeed;
        this.stop = true;
        setTimeout(this.name+'.scroll()',this.currentspeed);
        window.setTimeout(this.name+".stop = false", this.pausedelay);
    };
   
    this.display = function () {
        var htmlCode;
        htmlCode = '<div id="'+this.name+'" style="height:'+this.height+'; width:'+this.width+'; position:relative; overflow:hidden; " OnMouseOver="'+this.name+'.onmouseover(); " OnMouseOut="'+this.name+'.onmouseout(); ">';
        for(var i = 0; i < this.itemcount; i++) {
            htmlCode += '<div id="'+this.name+'item'+i+'"style="left:0px; width:'+this.width+'; position:absolute; top:'+(this.height*i)+'px; ">';
            htmlCode += this.item[i];
            htmlCode += '</div>';
        }
        htmlCode += '</div>';

        document.getElementById(this.divId).innerHTML=htmlCode;  
    };
   
    this.scroll = function () {
        if ( this.pause == true ) {
            window.setTimeout(this.name+".scroll()",this.pausedelay);
            this.pause = false;
        } else {
            this.currentspeed = this.scrollspeed;
            if ( !this.stop ) {
                for (var i = 0; i < this.itemcount; i++) {
                    obj = document.getElementById(this.name+'item'+i).style;
                    obj.top = parseInt(obj.top) - 1;
                    if ( parseInt(obj.top) <= this.height * (-1) ) obj.top = this.height * (this.itemcount-1);
                    if ( parseInt(obj.top) == 0 ) {
                        this.currentspeed = this.pausedelay;
                        this.i = i;
                    }
                }
            }
            if( !this.stop && i == this.itemcount && parseInt(obj.top) == 0 && this.reloadData == 1 ) {
                this.reloadData = 0;
            }
            else {
                window.setTimeout(this.name+".scroll()",this.currentspeed);
            }
        }
    };
   
    this.rolling = function () {
        if ( this.stop == false  ) {
            this.next();
        }
        window.setTimeout(this.name+".rolling()",this.scrollspeed);
    }
   
    this.onmouseover = function () {
        if ( this.pausemouseover ) {
            this.stop = true;
        }
    };
   
    this.onmouseout = function () {
        if ( this.pausemouseover ) {
            this.stop = false;
        }
    };
   
    this.next = function() {
   
        for (i = 0; i < this.itemcount; i++) {
            obj = document.getElementById(this.name+'item'+i).style;
            if ( parseInt(obj.left) < 1 ) {
                width = this.width + parseInt(obj.left);
                break;
            }
        }
        for (i = 0; i < this.itemcount; i++) {
            obj = document.getElementById(this.name+'item'+i).style;
            if ( parseInt(obj.left) < 1 ) {
                obj.left = this.width * (this.itemcount-1);
            } else {
                obj.left = parseInt(obj.left) - width;
            }
        }
   
    }
   
    this.prev = function() {
   
        for (i = 0; i < this.itemcount; i++) {
            obj = document.getElementById(this.name+'item'+i).style;
            if ( parseInt(obj.left) < 1 ) {
                width = parseInt(obj.left) * (-1);
                break;
            }
        }
        if ( width == 0 ) {
            total_width = this.width * (this.itemcount-1);
            for (i = 0; i < this.itemcount; i++) {
                obj = document.getElementById(this.name+'item'+i).style;
                if ( parseInt(obj.left) + 1 > total_width ) {
                    obj.left = 0;
                } else {
                    obj.left = parseInt(obj.left) + this.width;
                }
            }
        } else {
            for (i = 0; i < this.itemcount; i++) {
                obj = document.getElementById(this.name+'item'+i).style;
                if ( parseInt(obj.left) < 1 ) {
                    obj.left = 0;
                } else {
                    obj.left = parseInt(obj.left) + width;
                }
            }
        }
    }
   
    this.unext = function () {
        this.onmouseover();
        this.next();
        window.setTimeout(this.name+".onmouseout()",this.pausedelay);
    }
   
    this.uprev = function () {
        this.onmouseover();
        this.prev();
        window.setTimeout(this.name+".onmouseout()",this.pausedelay);
    }
}


<script>

eventstop = new smScroll('list');
eventstop.name = 'eventstop';
eventstop.height = 32;
eventstop.width  = 181;
eventstop.scrollspeed  = 1;
eventstop.pausedelay   = 5000;
eventstop.pausemouseover = true;

eventstop.add("<a href='#' onfocus='blur();'><span class='boldtxt fontevent '>[ 이벤트 하나 ]</span> 문화대축제 이벤트에참여 하시면, 10월 문화혜택을 즐...</a>");
eventstop.add("<a href='#' onfocus='blur();'><span class='boldtxt fontevent '>[ 이벤트 두울 ]</span> 문화대축제 이벤트에참여 하시면, 10월 문화혜택을 즐...</a>");
eventstop.add("<a href='#' onfocus='blur();'><span class='boldtxt fontevent '>[ 이벤트 세엣 ]</span> 문화대축제 이벤트에참여 하시면, 10월 문화혜택을 즐...</a>");
//eventstop.add("진행중인 이벤트가 없습니다.");

</script>
 
            <table width="207"  border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="13"><img src="/img/left_eventbg_l.gif"></td>
                <td background="/img/left_eventbg_m.gif" class="small wtxt">
                    <div id='list' ></div>
                </td>
                <td width="13"><img src="/img/left_eventbg_r.gif"></td>
              </tr>
            </table>

<script>
eventstop.start();
</script>