DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 標題的自動翻轉實現代碼
jQuery 標題的自動翻轉實現代碼
編輯:JQuery特效代碼     
即一條新聞滾 進視圖之後,會暫停幾秒鐘,然後繼續向上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>

我們來庖丁解牛一下這些代碼,首先來看樣式,因為我們一次只顯示一條新聞記錄,所以,我們應該把高度也設為一條記錄的,在這裡設為200px, 而且如果超了的話,我們就自動隱藏起來overflow=hidden。在這裡,數據源我們用的是feed.xml,Jquery加載並讀取xml文件是 很簡單的,可以參考上面的寫法,通過讀取xml文件,取出數據,進行組裝,就得到了要顯示的html代碼段並附加到#container中,同時,在滾動 顯示中,我們需要設置兩個變量,一個用於記錄當前可見的標題,另一個用於記錄剛剛滾動出視圖的標題。並且讓當前的記錄顯示在最上方,一定要注意的是,位置 不能為static。最後,就是寫一個函數,每次自動調用記錄的顯示。jquery還有很多的插件,可以更加簡化這些操作,以後多學習了。如果想學習 jquery,個人推薦jquery基礎教程,jonathan chaffer編寫的,很不錯,很適合初學者,國內其他的人寫的,裡面就魚龍混雜了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved