// ================================================================================== // 파일명 : CNBannerRolling.js (v1.1) // 만든사람 : 최정호(dev2@cnsoft.co.kr) // 만든날 : 2007-11-01 목 // 최종수정 : 2007-11-20 화요일 // // 미스터온에서 화면에 배너를 출력하기 위해서 만든 스크립트입니다. // 이 파일은 CNBanner.class.php 파일에서 호출되어 이용됩니다. // 꼭 배너에만 사용할 필요는 없고 사용형식에 따라서 다른 스크롤 하고자 하는 다른 것에도 적용이 가능합니다. // 뭐 수정은 좀 할 필요가 있겠지만요. // // 2007-11-20 화요일 수정내용 // - CNBannerSetObject, CNBannerShow 함수수정 // ---------------------------------------------------------------------------------- // 사용법은 아래와 같습니다. // // 1. 이 클래스 파일을 인클루드 합니다. // // 2. 아래와 같은 방법으로 객체를 생성합니다. // obj = new CNBannerInit(영역의 id값,영역넓이,영역높이,이동속도,한번에 움직일 픽셀수,다음배너까지 정지시간,이동방향) // 이동속도 라는것은 배너를 움젹여주는 함수가 호출되는 시간 주기입니다. // 짧을수록 자주호출 되어서 부드럽게 움직입니다. // 3. 배열정보를 입력합니다. // obj.banner[0] = 배너내용; ** banner 는 배열변수 입니다. // 4. 배너가 들어갈 div 객체를 세팅하고 값들을 페이지에 출력합니다. // obj.setObj(배너영역,'image' 또는 'text',스타일 정보); // 5. 배너출력 시작 // obj.showBanner(0,true); // 3. 다음 배너를 세팅합니다.. // obj.setTimeout(); // // 여기까지 하면 계속 자동으로 롤링이 됩니다. // ---------------------------------------------------------------------------------- // // 이 파일은 저작권이니 하는 소리 안합니다. // 필요하신 분은 누구든 가져가셔서 적절히 수정하셔서 사용하심 됩니다. // 대신에 상단에 만든사람 이름은 지우지 마세요. // 간혹 보면 배껴쓰고 자기가 만들었다고 하는 사람들 있는데 양심만 지켜주세요. // ================================================================================== /*----------------------------------------------------------------------- 호출함수 : obj.setObj 현재 보일배너와 다음에 보일 배너의 시작 위치등을 설정해서 배너 움직임을 초기화 하는 함수 -----------------------------------------------------------------------*/ function CNBannerSetObject(code,type,styles) { var selObj = ""; var style = new Array(); var bpWidth = this.pWidth + 2; // 영역안에 꽉차게 넣기 위해서 실제영역보다 2픽셀 크게 잡는다 // 텍스트일경우 줄사이의 간격이 있어야 하기 때문에 실제영역보다 4픽셀 크게 잡는다 if(type == "image") var bpHeight = this.pHeight + 2; else var bpHeight = this.pHeight + 4; // 영역의 기본 스타일지정하는 부분 // solid, bgColor 는 styles 인자값에 따라서 지정된다. // border, align 값은 미리 기본값을 지정해 둔다 style['border'] = 0; style['align'] = "center"; if(styles != "") { tmpArr = styles.split("||"); for(var i = 0 ; i < tmpArr.length ; i++) { tmpArr2 = tmpArr[i].split(":"); style[tmpArr2[0]] = tmpArr2[1]; } } if(style['solid'] == "" || style['solid'] == undefined) { style['solid'] = ""; } if(style['bgColor'] == "" || style['bgColor'] == undefined) { style['bgColor'] = ""; } // 배너 정보가 기록될 영역과 실제 배너가 들어갈 개체를 기록한다. var pObj = "

"; for(var i = 0 ; i < this.banner.length ; i++) { pObj += "

"; } pObj += "

"; // div 객체를 실제 페이지에 쓴다 document.write(pObj); // 배열에 저장된 정보들을 실제 div 객체 안에 넣는 부분 // 2007-11-20 화요일 수정내용 // - banner 가 하나만 있을때 selObj 에 배너 정보 넣는 부분 수정 if(this.banner.length > 1) { for(var i = 0 ; i < this.banner.length ; i++) { selObj = eval("document.all.b"+code+"["+i+"]"); selObj.innerHTML = this.banner[i]; } } else { selObj = eval("document.all.b"+code); selObj.innerHTML = this.banner; } }// ------------------------------------> CNBannerSetObject /*----------------------------------------------------------------------- 호출함수 : obj.scrBanner 현재 보일배너와 다음에 보일 배너의 시작 위치등을 설정해서 배너 움직임을 초기화 하는 함수 -----------------------------------------------------------------------*/ function CNBannerScrollBanner(idx1,idx2) { if(this.banner.length > 1) { this.style1 = eval("document.all.b"+this.bpCode+"["+idx1+"].style"); // 현재 배너의 스타일 this.style2 = eval("document.all.b"+this.bpCode+"["+idx2+"].style"); // 다음에 나올 배너의 스타일 } // 롤링방향에 따라서 다음에 나올 배너가 최종적으로 멈출 위치를 정해준다 if(this.direction == "up" || this.direction == "down") { stopPx = this.style1.pixelTop; } else stopPx = this.style1.pixelLeft; // 롤링방향에 따라서 다음에 나올 배너의 처음 위치를 정해준다 switch(this.direction) { case "up": this.style2.pixelTop = this.style1.pixelTop + this.pHeight; break; case "down": this.style2.pixelTop = this.style1.pixelTop - this.pHeight; break; case "left": this.style2.pixelLeft = this.style1.pixelLeft + this.pWidth; break; case "right": this.style2.pixelLeft = this.style1.pixelLeft - this.pWidth; break; } this.showBanner(idx2,true); this.intervalID = setInterval("B"+this.bpCode+".move()",this.interval); }// ------------------------------------> CNBannerScrollBanner /*----------------------------------------------------------------------- 호출함수 : obj.move 배너를 실제로 상하좌우로 움직여주는 함수 increment 값에 따라서 움직이는 픽셀의 수가 정해지기 때문에 빠르거나 느리게 동작한다 -----------------------------------------------------------------------*/ function CNBannerMove() { switch(this.direction) { case "up": // 상 this.style1.pixelTop -= this.increment; if(this.style2.pixelTop - this.increment <= stopPx) this.moveStop(); else this.style2.pixelTop -= this.increment; break; case "down": // 하 this.style1.pixelTop += this.increment; if(this.style2.pixelTop + this.increment >= stopPx) this.moveStop(); else this.style2.pixelTop += this.increment; break; case "left": // 좌 this.style1.pixelLeft -= this.increment; if(this.style2.pixelLeft - this.increment <= stopPx) this.moveStop(); else this.style2.pixelLeft -= this.increment; break; case "right": // 우 this.style1.pixelLeft += this.increment; if(this.style2.pixelLeft + this.increment >= stopPx) this.moveStop(); else this.style2.pixelLeft += this.increment; break; } }// ------------------------------------> CNBannerMove /*----------------------------------------------------------------------- 호출함수 : obj.moveStop 하나의 배너가 지정된 영역에 전부 출렫된 후 지연시간까지 멈추도록 하는 함수 -----------------------------------------------------------------------*/ function CNBannerMoveStop() { // 아래위로 움직일때와 좌우로 움직일때 멈추는 위치지정 if(this.direction == "up" || this.direction == "down") { this.style2.pixelTop = stopPx; } else this.style2.pixelLeft = stopPx; // 배너가 전부 출력되면 지연시간동안 멈추고 다음 배너를 지연시간 이후에 실행한다. clearInterval(this.intervalID); setTimeout("B"+this.bpCode+".nextBanner()",this.pause); }// ------------------------------------> CNBannerMoveStop /*----------------------------------------------------------------------- 호출함수 : obj.nextBanner 현재 지정된 배너의 인덱스 값으로 다음에 나올 배너를 지정하는 함수 다음 배너의 인덱스는 현재 인덱스보다 1이 크다 -----------------------------------------------------------------------*/ function CNBannerNext() { var tmpIdx = this.currIdx; if(this.currIdx == (this.banner.length - 1)) this.currIdx = 0; else this.currIdx = tmpIdx + 1; this.scrBanner(tmpIdx,this.currIdx); }// ------------------------------------> CNBannerNext /*----------------------------------------------------------------------- 호출함수 : obj.showBanner idx 값으로 화면에 보이게 될 배너를 지정해서 출력하는 함수 2007-11-20 화요일 수정내용 - banner 가 하나만 있을때 selObj 에 배너 정보 넣는 부분 수정 -----------------------------------------------------------------------*/ function CNBannerShow(idx,flag) { if(this.banner.length > 1) { var selObj = eval("document.all.b"+this.bpCode+"["+idx+"]"); } else var selObj = eval("document.all.b"+this.bpCode); if(flag == true) selObj.style.visibility = "visible"; else selObj.style.visibility = "hidden"; }// -----------------------------------> CNBannerShow /*----------------------------------------------------------------------- 호출함수 : obj.movePause flag 가 true 이면 일시정지, 아니면 다시 스크롤 -----------------------------------------------------------------------*/ function CNBannerPause(flag) { if(flag == true) { tmpInc = this.increment; this.increment = 0; } else this.increment = tmpInc; }// ------------------------------------> CNBannerPause function CNBannerInit(bpCode,width,height,interval,increment,pause,direction) { this.pWidth = width; this.pHeight = height; this.interval = interval; // move 함수가 실행되는 간격 (작을수록 빠르다) this.increment = increment; // move 함수로 한번에 이동할 픽셀수(클수록 한번에 많이 움직이므로 빠르다) this.pause = pause; // 다음 배너가 나올때까지의 지연시간 this.direction = direction; // 롤링방향 this.currIdx = 0; // 현재 선택된 배너의 인덱스번호 this.intervalID = ""; // 현재 움직이는 배너 this.bpCode = bpCode; // 배녀영역의 id값 this.style1 = ""; // 현재 선택된 객체의 스타일값 this.style2 = ""; // 다음에 올 객체의 스타일값 this.banner = new Array(); // 배너 정보가 들어가는 배열 // 객체에서 사용될 함수 지정 this.showBanner = CNBannerShow; this.nextBanner = CNBannerNext; this.setObj = CNBannerSetObject; this.scrBanner = CNBannerScrollBanner; this.move = CNBannerMove; this.moveStop = CNBannerMoveStop; this.movePause = CNBannerPause; }