YesYo.com MintState Forums  
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름  오토
비밀번호 
 

 
작성일 : 11-04-06 11:33
롤링 위 아래 버튼 적용
 글쓴이 : MintState
조회 : 6,290  
롤링 위 아래 버튼 적용

dtd 환경에서도 잘 작동 됩니다.



<style type="text/css"> 
*{font-family:돋움,Dotum,AppleGothic,sans-serif;font-size:12px;color:#333;} 
body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,pre,fieldset,input,blockquote,th,td{margin:0;padding:0;} 
ol,ul,dl{list-style:none;} 
a{color:#333;text-decoration:none;} 
a:hover,a:hover b,a:hover em,a:hover span{color:#06c;text-decoration:underline;} 

/*rolling Button*/ 
div.rollBtn{position:absolute;z-index:3;} 
div.rollBtn a.next{background-position:-22px 0px;cursor:hand;} 
div.rollBtn a.previous{margin-right:3px;cursor:hand;} 
div.rollBtn a span{display:none;} 

#bKey{position:relative;margin-top:9px;width:270px;zoom:1;} 
#bKey .keyBg{margin:1px 0 0 0;overflow:hidden;height:18px;} 
#bKey ul{clear:both;} 
#bKey ul li{float:left;height:18px;} 
#bKey ul li.x{background:url(http://yesyo.com/mintbbs/style/img/nav_div.gif) 100% 0 no-repeat;margin:0 7px 0 0;padding:0 7px 0 0;} 
#bKey ul li a{font-weight:bold;color:#FB6A31;letter-spacing:-1px;} 
#bKey .rollBtn{left:203px;top:0;} 
#bKey .rollBtn .up{margin-right:3px;} 
</style> 
<script language="JavaScript"> 
function scrolling(objId,sec1,sec2,speed,height){ 
	this.objId=objId; 
	this.sec1=sec1; 
	this.sec2=sec2; 
	this.speed=speed; 
	this.height=height; 
	this.h=0; 
	this.div=document.getElementById(this.objId); 
	this.htmltxt=this.div.innerHTML; 
  this.div.innerHTML=this.htmltxt+this.htmltxt; 
  this.div.isover=false; 
  this.div.onmouseover=function(){this.isover=true;} 
  this.div.onmouseout=function(){this.isover=false;} 
  var self=this; 
  this.div.scrollTop=0; 
  window.setTimeout(function(){self.play()},this.sec1); 
} 
scrolling.prototype={ 
	play:function(){ 
		var self=this; 
		if(!this.div.isover){ 
			this.div.scrollTop+=this.speed; 
			if(this.div.scrollTop>this.div.scrollHeight/2){ 
				this.div.scrollTop=0; 
			}else{ 
				this.h+=this.speed; 
				if(this.h>=this.height){ 
					if(this.h>this.height|| this.div.scrollTop%this.height !=0){ 
						this.div.scrollTop-=this.h%this.height; 
					} 
					this.h=0; 
					window.setTimeout(function(){self.play()},this.sec1); 
					return; 
				} 
			} 
		} 
		window.setTimeout(function(){self.play()},this.sec2); 
	}, 
	prev:function(){ 
		if(this.div.scrollTop == 0) 
		this.div.scrollTop = this.div.scrollHeight/2; 
		this.div.scrollTop -= this.height; 
	}, 
	next:function(){ 
		if(this.div.scrollTop ==  this.div.scrollHeight/2) 
		this.div.scrollTop =0; 
		this.div.scrollTop += this.height; 
	} 
}; 
</script> 
<div id="bKey"> 
<div id="jFavList" class="keyBg"> 
<ul> 
 <li class="x"><a href="http://c3.paran.com/?l=P111063">부시 8월 방한</a></li> 
 <li><a href="http://c3.paran.com/?l=P111064">우리 구단 가입금</a></li> 
</ul> 
<ul> 
 <li class="x"><a href="http://c3.paran.com/?l=P111065">진보신당 난입 폭행</a></li> 
 <li><a href="http://c3.paran.com/?l=P111066">남규리 대시</a></li> 
</ul> 

<ul> 
 <li class="x"><a href="http://c3.paran.com/?l=P111067">미국산 쇠고기 판매</a></li> 
 <li><a href="http://c3.paran.com/?l=P111068">조중동 다음</a></li> 
</ul> 
<ul> 
 <li class="x"><a href="http://c3.paran.com/?l=P111069">호나우지뉴 방한</a></li> 
 <li><a href="http://c3.paran.com/?l=P111070">김구라 사과</a></li> 
</ul> 
<ul> 
 <li class="x"><a href="LPG'>http://c3.paran.com/?l=P111071">LPG가격 인상</a></li> 
 <li><a href="http://c3.paran.com/?l=P111072">임창용 19세이브</a></li> 
</ul> 
<ul> 
 <li class="x"><a href="http://c3.paran.com/?l=P111073">한전 납품비리</a></li> 
 <li><a href="http://c3.paran.com/?l=P111074">유재석 웨딩사진</a></li> 
</ul> 
<ul> 
 <li class="x"><a href="http://c3.paran.com/?l=P111075">채은정 비키니</a></li> 

 <li><a href="PD'>http://c3.paran.com/?l=P111076">PD수첩 압수영장</a></li> 
</ul> 
<ul> 
 <li class="x"><a href="http://c3.paran.com/?l=P111077">신혼부부 주택</a></li> 
 <li><a href="http://c3.paran.com/?l=P111078">사제단 시국미사</a></li> 
</ul> 
</div> 
<script type="text/javascript"> var hotKeyword = new scrolling("jFavList",3000,1,1,18); </script> 

<div class="rollBtn" onmouseover="hotKeyword.div.isover=true;" onmouseout="hotKeyword.div.isover=false;"> 
  <a class="previous" onclick="hotKeyword.prev();" title="위로">[↑]</a> 
  <a class="next" onclick="hotKeyword.next();" title="아래로">[↓]</a> 
</div> 
</div>
첨부 파일
파일 종류: gif roll.gif (1.5K, 18 views)
Rated 5.0/5 (100%) (1 Votes)

(\__/)
(='.'=)
(")_(")~
Search Infomation by MintState
MintState

 
 

Total 173
번호 제   목 글쓴이 날짜 조회
173 GIF 플레이어(제어) MintState 09-26 78
172 youtube ID 값 추출 MintState 03-08 512
171 Javascript - 비밀번호 유효성 검사(password validation) MintState 11-14 936
170 하단고정레이아웃 MintState 07-01 1064
169 highcharts MintState 03-05 2100
168 jQuery Masonry 갤러리 리스트 효과 MintState 11-19 3148
167 파이어폭스, IE에 모두 적용되는 iframe 태그 MintState 04-11 8392
166 롤링 위 아래 버튼 적용 MintState 04-06 6291
165 Select 객체 추가 삭제 MintState 07-23 7206
164 숫자에 컴마(,) 쓰고 한글로 숫자 표시 MintState 06-09 6775
163 object 속성보기 MintState 04-29 9026
162 비밀번호 보안등급 체크 (2) MintState 04-29 10039
161 기본 공통 스크립트 MintState 04-16 7510
160 textarea에 줄바꿈 금지와 글자수 제한 MintState 02-17 13458
159 JSON 객체를 String으로 변환하기 MintState 01-19 13872
158 Tooltip 풍선 도움말 MintState 10-27 9590
157 다중 셀렉트 기본 방법 MintState 10-23 7876
156 자바스크립트를 이용한 암호화 MintState 09-01 9040
155 모든 자바스크립트 에러 잠재우기 (에러 디버그) MintState 05-13 8327
154 레이어 팝업 (2) MintState 04-24 8053
 1  2  3  4  5  6  7  8  9  
모바일 버전으로 보기
CopyRight ©2004 - 2017, YesYo.com MintState. ™