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 form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
jQuery each()小议
Mar 18 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JS截取字符串实例详解
Nov 24 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
微信小程序实现展示评分结果功能
Feb 15 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 MYSQL中插入当前时间
2008/04/06 PHP
php的字符串用法小结
2010/06/08 PHP
php发送post请求的三种方法
2014/02/11 PHP
php生成静态页面的简单示例
2014/04/17 PHP
详解PHP数组赋值方法
2015/11/07 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
JS array 数组详解
2009/03/22 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
React Router基础使用
2017/01/17 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
自我鉴定书范文
2013/10/02 职场文书
平面设计自荐信
2013/10/07 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
个人工作表现评语
2014/04/30 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android