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 1.5最新版本的改进细节分析
Jan 19 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
Javascript call及apply应用场景及实例
Aug 26 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防止站外远程提交表单的方法
2014/10/20 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php实现可运算的验证码
2015/11/10 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
离婚协议书范文
2015/01/26 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL