您當(dāng)前位置：首頁(yè) > web前端 > jquery > Jquery設(shè)置標(biāo)題的自動(dòng)翻轉(zhuǎn)

Jquery設(shè)置標(biāo)題的自動(dòng)翻轉(zhuǎn)

來(lái)源：程序員人生發(fā)布時(shí)間：2014-05-16 20:12:23 閱讀次數(shù)：3150次

　　我們平時(shí)在開(kāi)發(fā)web程序的時(shí)候，想把一個(gè)新聞源滾動(dòng)顯示新聞的條目的標(biāo)題及內(nèi)容摘要，而且是每次一條，有點(diǎn)類(lèi)似csdn的滾動(dòng)廣告。即一條新聞滾進(jìn)視圖之后，會(huì)暫停幾秒鐘，然后繼續(xù)向上2滾動(dòng)，淡出視圖，同時(shí)，下一條新聞接著滾入視圖。這次主要是用jquery來(lái)開(kāi)發(fā)這個(gè)功能，里面肯定有許多不足之處，歡迎大家點(diǎn)評(píng)。

　　先粘貼一下代碼：

以下為引用的內(nèi)容：
<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>

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

　　轉(zhuǎn)自：http://www.cnblogs.com/quguichuan/

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 Godaddy免費(fèi)Linux主機(jī)數(shù)據(jù)庫(kù)備份的問(wèn)題

下一篇 IE6中a標(biāo)簽location.href失效解決方法

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

Jquery設(shè)置標(biāo)題的自動(dòng)翻轉(zhuǎn)