본문 바로가기
아이들의 교육/공부

[자바스크립트] 롤링되는 배너(사진)

by 섹시맘1004 2013. 7. 23.
반응형

[자바스크립트] 롤링되는 배너(사진)


<script language="Javascript"> 

 



            /****************************************************************************** 

            * 만든목적: JS 롤링; 

            * 만든이:허웅 [comefeel]; 

            * 제작시간:총 7~8시간; 

            * JS 경력:현재 6개월차 -..-; 초허접; 

            * last update:2007.01 

            * igear.co.kr 도와준분 [zeldign] 플머 12년차; 

            * e-mail : igearmall.co.kr <comefeel@daum.net> <a href=mailto:comefeel@comefeel.com>comefeel@comefeel.com</a> 도 있지만 현재 안됨 ; 

            * 이것을 사용할려고 할시에 주석을 지우면 사용할수 없음; 

            * 허접한 소스를 보고 -_-+ 머라고 하면 쫏아감; 

            * ** 

            */ 


            var roll_Class=function(){this.initialize.apply(this,arguments);} 

            roll_Class.prototype={ 


            initialize:function(){ 


            this.className=arguments[0]?arguments[0]:null; 

            this.foundit(arguments[1],'',false); 

            this.contents=new Array('0'); 

            this.contents_delay=null; 

            this.nowdelay=null; 

            this.foundit( 

            this.roll.childNodes,this.foundvalue , 

            function(rt,that){ 


            if(that.constrain_size !== null) that.foundit(rt.childNodes,'IMG',function(rt,that){rt.style[(this.moving != 'left' ? 'width' : 'height')] = that.constrain_size;}); 

            that.contents_delay=that.contents[that.contents.length]=that.contents_delay+-rt[(that.moving=='left'?'offsetWidth':'offsetHeight')];}); 


            { 

            this.rollHeight=this.proll.style[(this.moving=='left'?'width':'height')]=Math.abs(this.contents[this.contents.length-1]); 

            this.roll.appendChild(this.roll.cloneNode(true)); 

            };}, 



            foundit:function(tg,n){ 


            var temp=new Array(); 


                for(var v in tg) 

                    switch(typeof arguments[2]){ 

                    case 'object':if(arguments[2].initialize(tg[v],n,this)==true) return; else break; 

                    case 'function':if(tg[v].nodeName==n) arguments[2](tg[v],this); break; 

                    case 'boolean':this[v]=tg[v]; break; 

                    default:if(tg[v].nodeName==n) return tg[v]; 

                } 


            return temp;}, 


            inaction:function(time){ 


            this.roll.style[this.moving]=time=time < 0 ?(this.fall==false && time <= -this.rollHeight?0:time):-this.rollHeight,null; 

            this.foundit(this.contents,time,{initialize:function(rt,vrt,that){if(Math.abs(rt - vrt) <(that.fast==false?that.tick:that.ftick)){that.roll.style[that.moving]=rt; that.nowdelay=that.fast==true?that.lengthen:that.delay; that.fast=false; return true;} else that.nowdelay=that.lengthen;}}); 

            {var ticks=this.fast==true?this.ftick:this.tick;} 

            this.control=setTimeout(this.className+".inaction("+(parseInt(this.roll.style[this.moving])+(this.fall==true?ticks:-ticks))+");",this.nowdelay);}, 


            stop:function(){ 


            this.temp=parseInt(this.roll.style[this.moving]); 

            clearTimeout(this.control);}    }; 


    </script> 

    <!-- 가로롤링 셈플 --> 




    <table> 

        <tr> 


            <td> 


            <div id="parent_rolltable" name="parent_rolltable" style="border-width:0px; border-color:black; border-style:solid; overflow:hidden;" onmouseover="width_class.stop();" onmouseout="width_class.inaction(width_class.temp);"> 

                <nobr id="rolltable" name="rolltable" style="position:relative;">

<span><a href="http://i7979.tistory.com/" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/2720434A51E8C54F06" width="120" height="51" border="0"></a></span>

<span><a href="http://i7979.tistory.com/" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/2720434A51E8C54F06" width="120" height="51" border="0"></a></span>

<span><a href="http://i7979.tistory.com/" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/2720434A51E8C54F06" width="120" height="51" border="0"></a></span>

<span><a href="http://i7979.tistory.com/" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/2720434A51E8C54F06" width="120" height="51" border="0"></a></span>

<span><a href="http://i7979.tistory.com/" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/2720434A51E8C54F06" width="120" height="51" border="0"></a></span>


</nobr> 

            </div> 

            </td>

        </tr> 

    </table> 


 <script language="Javascript"> 


            { 


                // 가로롤링 설정키 

                var roll_init=new Array(); 

                roll_init.constrain_size=null;                            // 전체의 높이값 [기본 default] 

                roll_init.tick=1;                                                    // 움직이는 칸수 

                roll_init.ftick=10;                                                // 빠른 움직이는 칸수 

                roll_init.lengthen=10;                                        // 1초당 움직이는 속도 

                roll_init.delay=1000;                                            // 잠시멈춤 속도 

                roll_init.fall=true;                                                // 이동 반대로 설정 ~ 

                roll_init.fast=false;                                            // 빠른속도:true 는 on 이며,false 는 off 이다. 

                roll_init.foundvalue =    'SPAN';                                // Nobr 내부엘리멘트 

                roll_init.moving='left';                                         // 상하좌우 움직임 설정 

                roll_init.roll=document.getElementById('rolltable');                                        // roll 

                roll_init.proll=document.getElementById('parent_rolltable');                            // proll 


            }; 


            { 


                // 가롤롤링 선언부분 


                var width_class=new roll_Class('width_class',roll_init); 

                width_class.inaction(); 


            }; 



            { 


               

            }; 


        </script> 




    </body> 

    </html>


출처 : http://www.blueb.co.kr/blueb/

반응형