|
|
先粘貼一下代碼，
復(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)其他的人寫的，里面就魚龍混雜了。
JavaScript技術(shù)：jQuery 標(biāo)題的自動(dòng)翻轉(zhuǎn)實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
