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 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
JS实现简易计算器
Feb 14 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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中使用Oracle数据库(6)
2006/10/09 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
快速入门python学习笔记
2017/12/06 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Python函数式编程实例详解
2020/01/17 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
信电学院毕业生自荐书
2014/05/24 职场文书
小人国观后感
2015/06/11 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书