jquery_jquery를 기반으로 하는 원활한 루프 뉴스 목록 플러그인

1. 렌더링:

팁 소스코드 다운로드http://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar
2.jquery 소스 코드:

코드 복사 코드는 다음과 같습니다.

(function ($){
$.fn.extend({
newsList:function(options){
var defaults ={
actName:'li', //개수 표시 items;
maxShowNum:'6', //표시되는 최대 항목 수
actNameH:'28', //한 번에 이동한 거리
ulClass:'.ul_news_list', // 복사된 레이어의 클래스
copyUlClass:'.ul_news_list2', //레이어 클래스 복사
autoTime:'1500', //자동 실행 시간
clickGoUpC:'.go_uplist', //위로 클릭; class;
clickDownUpC:' .go_downlist', //클릭다운 클래스;
goStart:'go_tart',
autoCloss:'flase' //자동 실행 스위치, 'flase'이면 켜져 있으면 꺼져 있습니다.
} ;

options = $.extend(defaults, options)
return this.each(function(){
var o = options;
var counts =1;
var linum = $($(this).find(o.actName),$(this)).size()
var ul_class = $($(this) .find(o.ulClass),$(this ));
var copy_ul_class = $($(this).find(o.copyUlClass),$(this))
var click_go_up_c = $($( this).find(o.clickGoUpC),$(this));
var click_go_down_C = $($(this).find(o.clickDownUpC),$(this))
var go_start = $( $(this).find(o.goStart) ,$(this))
if(linum > o.maxShowNum){
$(copy_ul_class).html($(ul_class).html()) ;
goStartList();
}
var thiswrap = $($(ul_class).parent().parent(),$(this))
//자동으로 함수 실행
function auto_function(){
if(counts $(ul_class).animate({top:'-=' o.actNameH},o.autoTime)
$(copy_ul_class); ).animate({top:'-=' o.actNameH},o.autoTime);
개수
}else{
$(ul_class).animate({top:0},0) ;
$(copy_ul_class).animate( {top:0},0);
counts = 1;
}
}//위로 이동하려면
(linum > o.maxShowNum){
$(click_go_up_c).click(function(){
if(counts $(ul_class).animate({top:'- =' o.actNameH},0);
$(copy_ul_class).animate({top:'-=' o.actNameH},0)
개
}else{
$ (ul_class).animate({top:0}, 0);
$(copy_ul_class).animate({top:0},0)
개수 = 1
}
}) ;
}
//아래로 이동할 때 클릭
if(linum > o.maxShowNum){
$(click_go_down_C).click(function(){
if(counts > ; 1){
개수--
$(ul_class).animate({top:'-' counts*o.actNameH},0); '-' 개수*o.actNameH},0) ;
}else{
$(ul_class).animate({top:0},0)
$(copy_ul_class).animate({top :0},0);
counts = linum 1;
}
})
}
//마우스가 지나갈 때 시작 및 중지
if(linum > o.maxShowNum){
$(thiswrap) .hover(function(){
goStopList();
},function(){
goStartList();
}); >}
function goStartList(){
if(o.autoCloss === 'flase'){
go_start = setInterval(auto_function,o.autoTime)
}
}
function goStopList(){
clearInterval(go_start );
}
})
}(jQuery)); 🎜>
3. HTML:

코드 복사
코드는 다음과 같습니다.

<script> <BR>$(document).ready(function(){ <BR>$("#newslist").newsList(); <BR>}) ; <BR></script>

스팬>

• 1. 탕산, 원촨, 위슈 지진 구조에 참여한 구조대원들당산, 원촨, 위슈 지진 구조 활동에 참여했습니다 li> ;
  
• 2. 모로코의 세라, 거리 아이들을 위한 기금 마련을 위한 서커스 공연 ; li>
  
• 3. 최근 쿤밍 경찰은 "홍싱뎬 현" 홍싱뎬 현의 "홍싱뎬 현" "싱강" 사악한 갱단이 체포됐다고 보고했습니다...> ;


• 4. 자신의 아이들이 폭동을 일으키고 있다는 사실을 알고 있던 인도의 케시는 사고로 목숨을 잃었습니다..> ;Zeng은 당나라에 참가하여 구출에 참여하기 위해 Zhouqu에 도착했습니다


• 5. 명나라 쿤밍 경찰은 최근 순뎬현의 '홍싱강' 갱단을 진압하고...


• 6. Tang에 참여했습니다. Tang에 참여했습니다.

;7. 한때 당나라에 참가했던 후베이성 ​​한커우는 두 강이 지나가는 것을 지켜보았습니다
;8. 호북무한한증은 당나라에 참전하였다. 증은 강가에서 당나라를 참관하였다. /ul>

4 . CSS:

코드 복사 코드는 다음과 같습니다. body { 글꼴 -family:"Microsoft Yahei",Arial,"Lucida Grande", 글꼴 크기:12px }

*{ padding:0; margin:0;}

img { border:0 ;}
.clear {clear:both;}
a { color:#000; text-장식:none;}
a:hover { color:#EC6104; 텍스트-장식:none;}
.undis { 디스플레이:없음;}/*news_list*/
.news_list_bar { 위치:상대적; 너비:560px; 높이:168px; 배경:url(../images/slideshow2/v3_picture6.gif) 반복-y; 배경색:#F00;}
.ul_news_list,
.ul_news_list2{ 위치:상대적; 목록-스타일:none;}
.ul_news_list li,
.ul_news_list2 li {line -높이:28px; 너비:500px; 오버플로:hidden; white-space:nowrap;padding:0 20px;}
.ul_news_list li a,
.ul_news_list2 li a{ padding-right:20px ;}
.go_upanddown { 위치:절대; 여백:-20px 0 0 500px;}
.go_upanddown 범위 { 패딩-오른쪽:10px; 커서:포인터;}