jQuery 标题的自动翻转实现代码


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编写的,很不错,很适合初学者,国内其他的人写的,里面就鱼龙混杂了。
Javascript 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
jQuery cdn使用介绍
May 08 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
JS常用函数使用指南
Nov 23 Javascript
PHP守护进程实例
Mar 06 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
JavaScript 替换Html标签实现代码
Oct 14 #Javascript
JavaScript null和undefined区别分析
Oct 14 #Javascript
JavaScript iframe的相互操作浅析
Oct 14 #Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 #Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 #Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 #Javascript
jquery 常用操作整理 基础入门篇
Oct 14 #Javascript
You might like
用PHP 4.2书写安全的脚本
2006/10/09 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
Highcharts入门之简介
2016/08/02 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python字符串切片操作知识详解
2016/03/28 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python中GIL的使用详解
2018/10/03 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
语文教师个人工作总结
2015/02/06 职场文书
python绘制箱型图
2021/04/27 Python
MySql开发之自动同步表结构
2021/05/28 MySQL
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
python中使用redis用法详解
2022/12/24 Redis