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进行数组追加方法小结
Jun 16 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
多人战的战术与战略
2020/03/04 星际争霸
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python re模块的高级用法详解
2018/06/06 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
python的移位操作实现详解
2019/08/21 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
电子专业毕业生自荐信
2014/05/25 职场文书
文员求职信
2014/07/15 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
离婚协议书怎么写
2014/09/12 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
音乐剧猫观后感
2015/06/04 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python