JQuery 텍스트 틈새 없 는 스크롤 효과 구현 예제 코드(Marquee 플러그 인)

JQuery 의 이음매 없 는 텍스트 스크롤 효 과 를 추천 하 는 동시에 그림 을 굴 릴 수도 있 고 주마등 효과 라 고도 합 니 다.
이 jquery 플러그 인 은 jquery 라 이브 러 리 를 기반 으로 다양한 스크롤 효 과 를 실현 할 수 있 으 며 HTML 코드 가 W3C 표준 에 부합 하도록 합 니 다.
사용 방법 은 다음 과 같다.
1.자 바스 크 립 트 를 불 러 옵 니 다.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.marquee.js"></script> 
<script type="text/javascript"> 
$(function(){   
$("#marquee").marquee({yScroll: "bottom"}); 
}); 
</script>

2.CSS 스타일 을 추가 합 니 다.

ul.marquee {display: block;line-height: 1;position: relative;overflow: hidden;width: 400px; height: 22px; } 
ul.marquee li {position: absolute; top: -999em;left: 0;display: block; white-space: nowrap; padding: 3px 5px; text-indent:0.8em;}

3.HTML 코드 는 다음 과 같다.

<ul id="marquee" >    
<li><a href="http://www.bloomylife.com/?cat=153" rel="external nofollow" target="_blank"> WEB    </a> [2011-10-20]</li>    
<li><a href="http://www.bloomylife.com/?cat=154" rel="external nofollow" target="_blank">     </a> [2011-09-20]</li>    
<li><a href="http://www.bloomylife.com/?cat=157" rel="external nofollow" target="_blank">     </a> [2011-10-16]</li>   
</ul>

이 플러그 인 은 많은 속성 옵션 을 제공 합 니 다.맞 춤 형 외관 과 효 과 를 설정 할 수 있 습 니 다.

{      
 yScroll: "top"    //        (    "top"   "bottom")     
 showSpeed: 850    //            
 scrollSpeed: 12    //          
 pauseSpeed: 5000   //                  
 pauseOnHover: true  //                   
 loop: -1       //          （-1     ）     
 fxEasingShow: "swing" //          
 fxEasingScroll: "linear" //          
 cssShowing: "marquee-showing" //  class      // 
 event handlers     
 init: null        //            
 beforeshow: null      //             
 show: null         //                    
 aftershow: null      //          
}

jquery.marquee.js 홈 페이지 주소 로 다운로드 가능:http://www.givainc.com/labs/marquee_jquery_plugin.htm
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.