[jQuery] 리스트 롤링 ( list rolling )

[jQuery] 리스트 롤링 ( list rolling )

 

1. Plugin 원본(소스) 사이트 : http://www.jugbit.com/jquery-vticker-vertical-news-ticker/

 

jquery.vticker-min.js

 

 

2. 환경

 

- 정해진 갯수 만큼 아래글이 롤링 ( 글 리스트가 반복 )

 

 

 

3. 소스

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.vticker-min.js"></script> <script type="text/javascript"> $(function(){ $('#dv_rolling').vTicker({ // 스크롤 속도(default: 700) speed: 500, // 스크롤 사이의 대기시간(default: 4000) pause: 3000, // 스크롤 애니메이션 animation: 'fade', // 마우스 over 일때 멈출 설정 mousePause: false, // 한번에 보일 리스트수(default: 2) showItems: 4, // 스크롤 컨테이너 높이(default: 0) height: 0, // 아이템이 움직이는 방향, up/down (default: up) direction: 'up' }); }); </script> <!-- 높이 테두리 잡기(vTicker의 Height로는 고정 높이 잡기가 어려움이 있어 처리) --> <div style="border:1px solid #e0e0e0;height:120px;width:238px;padding-top:5px;"> <!-- rolling div --> <div id="dv_rolling" > <ul> <li>1. 롤링 데이터</li> <li>2. 롤링 데이터</li> <li>3. 롤링 데이터</li> <li>4. 롤링 데이터</li> <li>5. 롤링 데이터</li> <li>6. 롤링 데이터</li> ... </ul> </div> </div>