Jquery 设置标题的自动翻转


Posted in Javascript onOctober 03, 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编写的,很不错,很适合初学者,国内其他的人写的,里面就鱼龙混杂了。
Javascript 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
js实现日历的简单算法
Jan 24 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
JS数组方法reduce的用法实例分析
Mar 03 Javascript
点击下载链接 弹出页面实现代码
Oct 01 #Javascript
点击文章内容处弹出页面代码
Oct 01 #Javascript
js类的静态属性和实例属性的理解
Oct 01 #Javascript
XmlUtils JS操作XML工具类
Oct 01 #Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 #Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 #Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 #Javascript
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
python提取内容关键词的方法
2015/03/16 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
深圳-东方伟业笔试部分
2015/02/11 面试题
中文专业毕业生自荐信
2013/10/28 职场文书
自考生自我评价分享
2014/01/18 职场文书
机关出纳岗位职责
2014/04/03 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电