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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
解决python运行启动报错问题
2020/06/01 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
我的中国梦口号
2014/06/16 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
授权委托书
2015/01/28 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
财务年终工作总结大全
2019/06/20 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技