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 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
js实现微博发布小功能
Jan 12 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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
zf框架db类的分页示例分享
2014/03/14 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
php三元运算符知识汇总
2015/07/02 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
js分页代码分享
2014/04/28 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
Javascript中神奇的this
2016/01/20 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
js链表操作(实例讲解)
2017/08/29 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
微信小程序实现笑脸评分功能
2018/11/03 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python 探针的实现原理
2016/04/23 Python
python logging日志模块的详解
2017/10/29 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python中拆分字符串的操作方法
2019/07/23 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
新手学python应该下哪个版本
2020/06/11 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
中文专业求职信
2014/06/20 职场文书
机电系毕业生求职信
2014/07/11 职场文书
关于环保的广播稿
2015/12/17 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
Python词云的正确实现方法实例
2021/05/08 Python