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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
详解React Native网络请求fetch简单封装
Aug 10 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
JS实现长图上下滚动效果
Mar 19 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生成xml简单实例代码
2009/12/16 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
调试php程序的简单步骤
2019/10/04 PHP
Javascript 继承机制实例
2009/08/12 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
python模块之StringIO使用示例
2015/04/08 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
使用Python读取大文件的方法
2018/02/11 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python如何删除文件中重复的字段
2019/07/16 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
请解释接口的显式实现有什么意义
2012/05/26 面试题
实习教师自我鉴定
2013/12/09 职场文书
自我评价如何写好?
2014/01/05 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
如何写好建议书
2014/03/13 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
英文邀请函
2015/02/02 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python