jQuery 标题的自动翻转实现代码

这世道越变越坏

这世道越变越坏

2016-02-19 15:06

今天图老师小编给大家介绍下jQuery 标题的自动翻转实现代码,平时喜欢jQuery 标题的自动翻转实现代码的朋友赶紧收藏起来吧!记得点赞哦~
即一条新闻滚 进视图之后,会暂停几秒钟,然后继续向上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"
h3Recent 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编写的,很不错,很适合初学者,国内其他的人写的,里面就鱼龙混杂了。
展开更多 50%)
分享

猜你喜欢

jQuery 标题的自动翻转实现代码

Web开发
jQuery 标题的自动翻转实现代码

Jquery 设置标题的自动翻转

Web开发
Jquery 设置标题的自动翻转

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery 分页控件实现代码

Web开发
jquery 分页控件实现代码

jQuery 浮动广告实现代码

Web开发
jQuery 浮动广告实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 弹出层实现代码

Web开发
jquery 弹出层实现代码

jQuery 页面 Mask实现代码

Web开发
jQuery 页面 Mask实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Visual C# 诠释常用排序算法

Visual C# 诠释常用排序算法

JQuery 解析多维的Json数据格式

JQuery 解析多维的Json数据格式
下拉加载更多内容 ↓