您的位置：首页 > Web前端 > JQuery

jquery实现标题的自动翻转功能

2009-10-07 20:43 501 查看

时间:2009-10-3 20:57:25 来源:www.cnblogs.com
作者:

本次使用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。最后，就是写一个函数，每次自动调用记录的显示。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航