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

롤링 위 아래 버튼 적용

페이지 정보

작성자 MintState 댓글 0건 조회 7,160회 작성일 11-04-06 11:33

본문

롤링 위 아래 버튼 적용

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, 20 views)

댓글목록

등록된 댓글이 없습니다.

Total 176건 1 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
176 MintState 119 04-19
175 MintState 559 11-02
174 MintState 513 10-27
173 MintState 589 09-26
172 MintState 1114 03-08
171 MintState 1633 11-14
170 MintState 1725 07-01
169 MintState 2648 03-05
168 MintState 3660 11-19
167 MintState 8964 04-11
열람중 MintState 7161 04-06
165 MintState 7757 07-23
164 MintState 7603 06-09
163 MintState 9544 04-29
162 MintState 10692 04-29
161 MintState 8119 04-16
160 MintState 14084 02-17
159 MintState 14427 01-19
158 MintState 10176 10-27
157 MintState 8879 10-23
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2018, YesYo.com MintState. ™