快捷導(dǎo)航

jQuery 標(biāo)題的自動(dòng)翻轉(zhuǎn)實(shí)現(xiàn)代碼

更新時(shí)間：2009年10月14日 17:32:39 作者：

我們平時(shí)在開發(fā)web程序的時(shí)候，想把一個(gè)新聞源滾動(dòng)顯示新聞的條目的標(biāo)題及內(nèi)容摘要，而且是每次一條，有點(diǎn)類似csdn的滾動(dòng)廣告。

即一條新聞滾進(jìn)視圖之后，會(huì)暫停幾秒鐘，然后繼續(xù)向上2滾動(dòng)，淡出視圖，同時(shí)，下一條新聞接著滾入視圖。這次主要是用jquery來開發(fā)這個(gè)功能，里面肯定有許多不足之處，歡迎大家點(diǎn)評(píng)。
先粘貼一下代碼，

復(fù)制代碼代碼如下:

 
<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> 

我們來庖丁解牛一下這些代碼，首先來看樣式，因?yàn)槲覀円淮沃伙@示一條新聞?dòng)涗?，所以，我們?yīng)該把高度也設(shè)為一條記錄的，在這里設(shè)為200px，而且如果超了的話，我們就自動(dòng)隱藏起來overflow=hidden。在這里，數(shù)據(jù)源我們用的是feed.xml，Jquery加載并讀取xml文件是很簡(jiǎn)單的，可以參考上面的寫法，通過讀取xml文件，取出數(shù)據(jù)，進(jìn)行組裝，就得到了要顯示的html代碼段并附加到#container中，同時(shí)，在滾動(dòng) 顯示中，我們需要設(shè)置兩個(gè)變量，一個(gè)用于記錄當(dāng)前可見的標(biāo)題，另一個(gè)用于記錄剛剛滾動(dòng)出視圖的標(biāo)題。并且讓當(dāng)前的記錄顯示在最上方，一定要注意的是，位置不能為static。最后，就是寫一個(gè)函數(shù)，每次自動(dòng)調(diào)用記錄的顯示。jquery還有很多的插件，可以更加簡(jiǎn)化這些操作，以后多學(xué)習(xí)了。如果想學(xué)習(xí) jquery，個(gè)人推薦jquery基礎(chǔ)教程，jonathan chaffer編寫的，很不錯(cuò)，很適合初學(xué)者，國(guó)內(nèi)其他的人寫的，里面就魚龍混雜了。

您可能感興趣的文章: