jQuery 标题的自动翻转实现代码
更新时间：2009年10月14日 17:32:39 作者：
我们平时在开发web程序的时候，想把一个新闻源滚动显示新闻的条目的标题及内容摘要，而且是每次一条，有点类似csdn的滚动广告。
即一条新闻滚 进视图之后，会暂停几秒钟，然后继续向上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编写的，很不错，很适合初学者，国内其他的人写的，里面就鱼龙混杂了。
先粘贴一下代码，
复制代码 代码如下:
<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编写的，很不错，很适合初学者，国内其他的人写的，里面就鱼龙混杂了。
相关文章
这篇文章主要介绍了jQuery使用之处理页面元素用法,实例分析了jQuery针对元素的内容、复制、移动和替换等操作技巧,需要的朋友可以参考下2015-01-01
基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）
新浪微博未登录首页有一个“大家正在说”的模块，动态滚动最新发布的微博。2011-03-03
jquery下jstree简单应用，学习jstree的朋友可以参考下。2011-04-04
JQuery WEUI Select 组件增加搜索栏示例demo
这篇文章主要介绍了JQuery WEUI Select 组件增加搜索栏示例demo,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
很多朋友不清楚(function(){... })();这几种写法各代表是什么意思，下面小编通过本教程给大家简单介绍下(function(){... })();知识，感兴趣的朋友跟着小编一起学习吧2016-08-08
JQuery Tips(4) 一些关于提高JQuery性能的Tips
如今咱祖国已经崛起了..电脑的配置也是直线上升.可是js的性能问题依然不可小觑..尤其在万恶的IE中..js引擎速度本来就慢..如果JS如果再写不好，客户端多开几个窗口假死肯定是家常便饭了.废话不说了，下面说说js性能提升的一些小Tips.2009-12-12
在跟html+ashx打交道的园友们肯定会发现，这种模式虽然优美，但在开发中会遇到一些难处理的地方。我也不例外，下面是自己在实际开发中总结出来的几条经验，希望跟大家分享，更希望得到大家的建议和更好的解决方法！2011-07-07
这篇文章主要展示了jQuery网页版打砖块小游戏源码，大家都一定玩过打砖块这款小游戏，今天我们不仅要玩转它，还要实现打砖块小游戏，感兴趣的小伙伴们可以参考一下2015-08-08
如何解决jQuery EasyUI 已打开Tab重新加载问题
最近在项目中遇到这样的需求，要求实现点击左侧已经打开的tab可以刷新重新加载datagrid。下面给大家分享实现代码，一起看看吧2016-12-12
本文主要介绍了Jquery Easyui验证扩展，Easyui验证，Easyui校验，js正则表达式。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论