软件开发培训班 >> 编程开发 >> JavaScript


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编写的，很不错，很适合初学者，国内其他的人写的，里面就鱼龙混杂了 。