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 ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python实现LRU热点缓存及原理
2019/10/29 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
单位实习证明怎么写
2014/01/17 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书