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 相关文章推荐
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
JQuery基础语法小结
Feb 27 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
Node.js实现断点续传
Jun 23 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中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
AngularJS快速入门
2015/04/02 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
python刷投票的脚本实现代码
2014/11/08 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
详解Python中的文件操作
2016/08/28 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python 操作 MySQL数据库
2020/09/18 Python
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
中科软笔试题和面试题
2014/10/07 面试题
个人找工作的自我评价
2013/10/17 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技