Posted in Javascript onOctober 14, 2009
即一条新闻滚 进视图之后,会暂停几秒钟,然后继续向上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编写的,很不错,很适合初学者,国内其他的人写的,里面就鱼龙混杂了。
jQuery 标题的自动翻转实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@