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 获取对象 基本选择与层级
May 31 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
javascript实现动态标签云
Oct 16 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 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分页思路以及在ZF中的使用
2012/05/30 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
谈谈JS中的!!
2017/12/07 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
在python的类中动态添加属性与生成对象
2016/09/17 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
python绘制简单折线图代码示例
2017/12/19 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
使用Python实现批量ping操作方法
2020/05/06 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
python tkinter实现连连看游戏
2020/11/16 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
主管职责范文
2013/11/09 职场文书
促销活动总结模板
2014/07/01 职场文书
师德师风个人总结
2015/02/06 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
MySQL笔记 —SQL运算符
2022/01/18 MySQL
html中两种获取标签内的值的方法
2022/06/16 jQuery