Jquery设置标题的自动翻转

　2009-10-08 00:00:00　来源：WEB开发网　　　

核心提示：我们平时在开发web程序的时候，想把一个新闻源滚动显示新闻的条目的标题及内容摘要，Jquery设置标题的自动翻转，而且是每次一条，有点类似csdn的滚动广告，里面肯定有许多不足之处，欢迎大家点评，即一条新闻滚进视图之后，会暂停几秒钟

我们平时在开发web程序的时候，想把一个新闻源滚动显示新闻的条目的标题及内容摘要，而且是每次一条，有点类似csdn的滚动广告。即一条新闻滚进视图之后，会暂停几秒钟，然后继续向上2滚动，淡出视图，同时，下一条新闻接着滚入视图。这次主要是用jquery来开发这个功能，里面肯定有许多不足之处，欢迎大家点评。

先粘贴一下代码，

　　　　<style> 　　　　　<%--　　　#news-feed 　　　　　　　　{ 　　　　　　　　　　　　padding:　0; 　　　　　　　　　　　　margin:　0　0　0　10px; 　　　　　　　　　　　　position:　relative; 　　　　　　　　　　　　height:　200px; 　　　　　　　　　　　　width:　17em; 　　　　　　　　　　　　overflow:　hidden; 　　　　　　　　} 　　　　　　　　.headline 　　　　　　　　{ 　　　　　　　　　　　　position:　absolute; 　　　　　　　　　　　　height:　200px; 　　　　　　　　　　　　top:　210px; 　　　　　　　　　　　　overflow:　hidden; 　　　　　　　　}--%> 　　　　</style> 　　　　<script　type="text/javascript"> 　　　　　　　　　$(document).ready(function()　{ 　　　　　　　　　　　$('#news-feed').each(function()　{ 　　　　　　　　　　　　　var　$container　=　$(this); 　　　　　　　　　　　　　$container.empty(); 　　　　　　　　　　　　　$.get('feed.xml',　function(data)　{ 　　　　　　　　　　　　　　　$('rss　item',　data).each(function()　{ 　　　　　　　　　　　　　　　　　var　$link　=　$('<a></a>') 　　　　　　　　　　　　　　　　　　　.attr('href',　$('link',　this).text()) 　　　　　　　　　　　　　　　　　　　.text($('title',　this).text()); 　　　　　　　　　　　　　　　　　var　$headline　=　$('<h4></h4>').append($link); 　　　　　　　　　　　　　　　　　　　　　　　　　　var　pubDate　=　new　Date($('pubDate',　this).text()); 　　　　　　　　　　　　　　　　　var　pubMonth　=　pubDate.getMonth()　+　1; 　　　　　　　　　　　　　　　　　var　pubDay　=　pubDate.getDate();　　　　　　　　　　　　　　　　　　var　pubYear　=　pubDate.getFullYear(); 　　　　　　　　　　　　　　　　　var　$publication　=　$('<div></div>') 　　　　　　　　　　　　　　　　　　　.addClass('publication-date') 　　　　　　　　　　　　　　　　　　　.text(pubMonth　+　'/'　+　pubDay　+　'/'　+　pubYear); 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　var　$summary　=　$('<div></div>') 　　　　　　　　　　　　　　　　　　　.addClass('summary') 　　　　　　　　　　　　　　　　　　　.html($('description',　this).text()); 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　$('<div></div>') 　　　　　　　　　　　　　　　　　　　.addClass('headline') 　　　　　　　　　　　　　　　　　　　.append($headline,　$publication) 　　　　　　　　　　　　　　　　　　　.appendTo($container); 　　　　　　　　　　　　　　　}); 　　　　　　　　　　　　　　　　　　　　　　　　var　currentHeadline　=　0,　oldHeadline　=　0; 　　　　　　　　　　　　　　　var　hiddenPosition　=　$container.height()　+　10; 　　　　　　　　　　　　　　　$('div.headline').eq(currentHeadline).css('top',　0); 　　　　　　　　　　　　　　　var　headlineCount　=　$('div.headline').length; 　　　　　　　　　　　　　　　var　pause; 　　　　　　　　　　　　　　　　　　　　　　　　var　headlineRotate　=　function()　{ 　　　　　　　　　　　　　　　　　currentHeadline　=　(oldHeadline　+　1)　%　headlineCount; 　　　　　　　　　　　　　　　　　$('div.headline').eq(oldHeadline).animate( 　　　　　　　　　　　　　　　　　　　{top:　-hiddenPosition},　'slow',　function()　{ 　　　　　　　　　　　　　　　　　　　　　$(this).css('top',　hiddenPosition); 　　　　　　　　　　　　　　　　　　　}); 　　　　　　　　　　　　　　　　　$('div.headline').eq(currentHeadline).animate( 　　　　　　　　　　　　　　　　　　　{top:　0},　'slow',　function()　{ 　　　　　　　　　　　　　　　　　　　　　pause　=　setTimeout(headlineRotate,　4000); 　　　　　　　　　　　　　　　　　　　}); 　　　　　　　　　　　　　　　　　oldHeadline　=　currentHeadline; 　　　　　　　　　　　　　　　}; 　　　　　　　　　　　　　　　pause　=　setTimeout(headlineRotate,　4000); 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　$container.hover(function()　{ 　　　　　　　　　　　　　　　　　clearTimeout(pause); 　　　　　　　　　　　　　　　},　function()　{ 　　　　　　　　　　　　　　　　　pause　=　setTimeout(headlineRotate,　3000); 　　　　　　　　　　　　　　　}); 　　　　　　　　　　　　　}); 　　　　　　　　　　　}); 　　　　　　　　　}); 　　　　</script> </head> <body> 　　　　<form　id="form1"　runat="server"> 　　　　<div　id="sidebar"> 　　　　　　　　<h3>Recent　News</h3> 　　　　　　　　<div　id="news-feed"> 　　　　　　　　　　　　<a　href="###">News　Releases</a> 　　　　　　　　</div> 　　　　</div> 　　　　</form> </body>