jquery_jquery를 기반으로 하는 원활한 루프 뉴스 목록 플러그인-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 18:09:47

원래의

1055명이 탐색했습니다.

1. 렌더링:
jquery_jquery를 기반으로 하는 원활한 루프 뉴스 목록 플러그인

팁 소스코드 다운로드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 <= linum){ 
$(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 <= linum){ 
$(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: 
 

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

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

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

;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; 커서:포인터;} 