一、效果图：
tips源码下载：http://files.cnblogs.com/waitingbar/newslist.rar
二、JQuery源码:
03 |
newsList:function(options){ |
08 |
ulClass:'.ul_news_list', |
09 |
copyUlClass:'.ul_news_list2', |
11 |
clickGoUpC:'.go_uplist', |
12 |
clickDownUpC:'.go_downlist', |
17 |
options = $.extend(defaults, options); |
18 |
return this.each(function(){ |
21 |
var linum = $($(this).find(o.actName),$(this)).size(); |
22 |
var ul_class = $($(this).find(o.ulClass),$(this)); |
23 |
var copy_ul_class = $($(this).find(o.copyUlClass),$(this)); |
24 |
var click_go_up_c = $($(this).find(o.clickGoUpC),$(this)); |
25 |
var click_go_down_C = $($(this).find(o.clickDownUpC),$(this)); |
26 |
var go_start = $($(this).find(o.goStart),$(this)); |
27 |
if(linum > o.maxShowNum){ |
28 |
$(copy_ul_class).html($(ul_class).html()); |
31 |
var thiswrap = $($(ul_class).parent().parent(),$(this)); |
33 |
function auto_function(){ |
35 |
$(ul_class).animate({top:'-=' + o.actNameH},o.autoTime); |
36 |
$(copy_ul_class).animate({top:'-=' + o.actNameH},o.autoTime); |
39 |
$(ul_class).animate({top:0},0); |
40 |
$(copy_ul_class).animate({top:0},0); |
45 |
if(linum > o.maxShowNum){ |
46 |
$(click_go_up_c).click(function(){ |
48 |
$(ul_class).animate({top:'-=' + o.actNameH},0); |
49 |
$(copy_ul_class).animate({top:'-=' + o.actNameH},0); |
52 |
$(ul_class).animate({top:0},0); |
53 |
$(copy_ul_class).animate({top:0},0); |
59 |
if(linum > o.maxShowNum){ |
60 |
$(click_go_down_C).click(function(){ |
63 |
$(ul_class).animate({top:'-'+ counts*o.actNameH},0); |
64 |
$(copy_ul_class).animate({top:'-'+ counts*o.actNameH},0); |
66 |
$(ul_class).animate({top:0},0); |
67 |
$(copy_ul_class).animate({top:0},0); |
73 |
if(linum > o.maxShowNum){ |
74 |
$(thiswrap).hover(function(){ |
80 |
function goStartList(){ |
81 |
if(o.autoCloss === 'flase'){ |
82 |
go_start = setInterval(auto_function,o.autoTime); |
85 |
function goStopList(){ |
86 |
clearInterval(go_start); |
三、HTML:
<script language=”JavaScript”>
$(document).ready(function(){
$(“#newslist”).newsList();
});
</script>
<div id=”newslist”>
<div class=”go_upanddown”><span class=”go_uplist”><img src=”images/newslist/goupbtn.gif” /></span><span class=”go_downlist”><img src=”images/newslist/godownbtn.gif” /></span></div>
<div class=”news_list_bar”>
<ul class=”ul_news_list”>
<li><a href=”#”>1、曾参加过唐山、汶川、玉树地震救援的援</a><a href=”#”>曾参加过唐，又来到了舟曲参加救援</a></li>
<li><a href=”#”>2、摩洛哥塞拉，艺术家在一场为流浪儿童为流浪儿童为流浪儿童为流浪儿童募捐的马戏节目中表演</a></li>
<li><a href=”#”>3、昆明警方近日县的“洪兴甸县的“洪兴甸县的“洪兴甸县的“洪兴帮”黑恶势力团伙，缴获…</a></li>
<li><a href=”#”>4、印度克什知自己的孩子在骚乱中丧生时痛不欲生..</a><a href=”#”>曾参加过唐曾参加过唐到了舟曲参加救援</a></li>
<li><a href=”#”>5、明昆明警方近日捣毁了寻甸县的“洪兴帮”黑恶势力团伙，缴获…</a></li>
<li><a href=”#”>6、曾参加过唐曾参加过唐曾参加过唐曾参加过唐</a></li>
<li><a href=”#”>7、湖北武汉汉口汉口曾参加过唐曾参加过唐曾参加过唐曾参加过唐观看两江洪峰过</a></li>
<li><a href=”#”>8、湖北武汉汉曾参加过唐曾参加过唐曾参加过唐曾参加过唐集在江边观</a></li>
<li><a href=”#”>9、湖北武汉汉口汉口龙王庙景区观景平台上，市民聚集在江边观看两江洪峰过汉</a></li>
</ul>
<ul class=”ul_news_list2″></ul>
</div>
</div>
四、CSS:
body { font-family:”微软雅黑”,Arial,”Lucida Grande”, Verdana, Lucida; font-size:12px; }
*{ padding:0; margin:0;}
img { border:0;}
.clear { clear:both;}
a { color:#000; text-decoration:none;}
a:hover { color:#EC6104; text-decoration:none;}
.undis { display:none;}/*news_list*/
.news_list_bar { position:relative; width:560px; height:168px; overflow:hidden; background:url(../images/slideshow2/v3_picture6.gif) repeat-y; background-color:#F00;}
.ul_news_list,
.ul_news_list2{ position:relative; list-style:none;}
.ul_news_list li,
.ul_news_list2 li{line-height:28px; height:28px; width:500px; overflow:hidden; white-space:nowrap;padding:0 20px;}
.ul_news_list li a,
.ul_news_list2 li a{ padding-right:20px;}
.go_upanddown { position:absolute; margin:-20px 0 0 500px;}
.go_upanddown span { padding-right:10px; cursor:pointer;}
Mikel
