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 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
jQuery的框架介绍
May 11 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
理解JavaScript原型链
Oct 25 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
create-react-app开发常用配置教程
Jun 25 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
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
php连接mysql数据库
2017/03/21 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
使用console进行性能测试
2015/04/27 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
浅谈js原生拖放
2016/11/21 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
pytorch标签转onehot形式实例
2020/01/02 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
食品安全承诺书范文
2014/08/29 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
国庆阅兵观后感
2015/06/15 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
2016党员党课心得体会
2016/01/07 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
MongoDB支持的数据类型
2022/04/11 MongoDB
Python实现简单得递归下降Parser
2022/05/02 Python