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

　　推荐阅读

　　JavaScript 自动在表格前面增加序号

JavaScript 自动为表格增加序号 .index_tab{width:100%;border-collapse:collapse;border:1px solid #005892;margin:8px 0;} .index_tab td{line-height:35px;border:1px solid #005892;padding-left>>>详细阅读

本文标题：Jquery 设置标题的自动翻转

地址：http://www.17bianji.com/kaifa2/JS/28025.html

1/2 1