JAKARTAPROJECT
JAKARTA TIPJSP TIPJSP 질문&답변DATABASE TIPJAVASCRIPT TIPWEBHACKING TIP기타 TIP
자바스크립트 팁
자바스크립트 팁
자바스크립트 및 CSS 팁 게시판입니다
롤링 스크립트
GoodBug http://www.jakartaproject.com
이미지 슬라이더 보기

파란닷컴 초기화면에 적용된 롤링 스크립트 입니다.

해당 스크립트는 확인한 결과 ie/ff 모두 잘 작동하네요!!

 

FROM http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=61953&page=1

 

<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://simg.paran.com/top_v2.2/top/ic_line06.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>
 <BODY>
<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="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="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>

2009-02-04 18:13:03
211.189.124.***

 

좋은생각 ^^

0점 (0명)
덧글 1개 | 태그 2개 | 관련글보기
태그입력
쉽표(,)구분으로 한번에 여러 태그를 입력할수 있습니다
rolling (1) 롤링 (2)
행복한광대
(0) (0)
잘쓰겠습니다.ㅎㅎ
118.218.148.*** 2009-02-04 18:13:03
이름 비밀번호
자바스크립트 팁
자바스크립트 및 CSS 팁 게시판입니다
! 번호 제목 글쓴이 일자 조회
220 img 이미지 부드럽게 줄이기 1 GoodBug 2009-12-18 8,158
219 rss xml 파싱하는 모듈 입니다. 1 고고싱 2009-11-27 7,610
218 트리 입니다 . 1 고고싱 2009-11-27 5,846
217 에러처리 1 kaiser 2009-05-11 6,060
216 웹페이지 복사 방지 해지 하는 법 kaiser 2009-05-03 11,645
215 javascript 한글 짜르기 1 1 kaiser 2008-08-14 7,953
rolling 롤링 스크립트 1 2 GoodBug 2008-07-11 10,101
213 alert 메시지를 print 처럼 사용하기 2 고고싱 2008-06-10 8,642
212 onload onload 펑션이 정의되어 있는 상황에서 onload에 추가하기 1 GoodBug 2008-04-11 8,417
211 javascript 자바스크립트 개발가이드 4 1 kaiser 2008-04-09 8,866
210 escape HTML escpae code 1 GoodBug 2008-04-02 6,471
209 optgroup SELECT 목록 그룹별로 묶기 1 1 GoodBug 2008-03-06 8,191
208 동적 테이블 테이블에 동적 TR 삽입 및 삭제 IE, FF 공용 1 GoodBug 2008-01-18 11,717
207 drag Javascript drag and drop 1 1 GoodBug 2008-01-16 8,136
206 sort Sortable HTML table 2 GoodBug 2008-01-16 7,374
205 scrollable table Scrollable HTML table 1 GoodBug 2008-01-16 7,057
204 CSS CSS centered layout 1 1 GoodBug 2008-01-16 6,656
203 utf8 Javascript UTF-8 1 GoodBug 2008-01-16 7,885
202 encode Javascript url decode, encode 2 GoodBug 2008-01-16 8,099
201 암호화 Javascript MD5 2 GoodBug 2008-01-15 7,335
copyright 2005-2018 by Unicorn