JQuery 基础教程 ----之图像翻转
JQuery 基础教程 ----之图像翻转
1
/***************************************
2
=NEWS FEED ROTATOR
3
-------------------------------------- */
4![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
$(document).ready(function() {
6
// Using each as an 'if' and containing stuff inside a private namespace.
7
$('#news-feed').each(function() {
8
var $this = $(this);
9
$this.empty();
10![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
var totalHeight = $this.height();
12
var fadeHeight = totalHeight / 4;
13![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
for (var i = 0; i < fadeHeight; i+=2) {
15
$('<div></div>').css({
16
opacity: i / fadeHeight,
17
top: totalHeight - fadeHeight + i
18
}).addClass('fade-slice').appendTo(this);
19
}
20
var $newsLoading = $('<img/>')
21
.attr({
22
'src': '/cookbook/images/loading.gif',
23
'alt': 'loading. please wait'}
24
)
25
.addClass('news-wait');
26
$this.ajaxStart(function() {
27
$this.append($newsLoading);
28
}).ajaxStop(function() {
29
$newsLoading.remove();
30
});
31![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
// Retrieve the news feed.
33
$.get('news/feed.php', function(data) {
34
$('/rss//item', data).each(function() {
35
var title = $('title', this).text();
36
var linkText = $('link', this).text();
37
var $link = $('<a></a>').attr('href', linkText).text(title);
38
$link = $('<h3></h3>').html($link);
39
40
var pubDate = new Date($('pubDate', this).text());
41
var pubMonth = pubDate.getMonth() + 1;
42
var pubDay = pubDate.getDate();
43
var pubYear = pubDate.getFullYear();
44
var $pubDiv = $('<div></div>')
45
.addClass('publication-date')
46
.text(pubMonth + '/' + pubDay + '/' + pubYear);
47![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
48
var summaryText = $('description', this).text();
49
// adding this one line to replace ugly bracketed ellipses
50
summaryText = summaryText.slice(0,summaryText.indexOf(' [
]')) + ' …';
51
var $summary = $('<div></div>')
52
.addClass('summary')
53
.html(summaryText);
54![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
$('<div></div>')
56
.addClass('headline')
57
.append($link)
58
.append($pubDiv)
59
.append($summary)
60
.appendTo('#news-feed');
61
});
62![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
63
// Set up the rotator.
64
var currentHeadline = 0, oldHeadline = 0;
65
var hiddenPosition = totalHeight + 10;
66
$('div.headline:eq(' + currentHeadline + ')').css('top','0');
67
var headlineCount = $('div.headline').length;
68
var headlineTimeout;
69
var rotateInProgress = false;
70![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
71
// Rotator function.
72
var headlineRotate = function() {
73
if (!rotateInProgress) {
74
rotateInProgress = true;
75
headlineTimeout = false;
76![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
77
currentHeadline = (oldHeadline + 1) % headlineCount;
78
$('div.headline:eq(' + oldHeadline + ')')
79
.animate({top: -hiddenPosition}, 'slow', function() {
80
$(this).css('top',hiddenPosition);
81
});
82
$('div.headline:eq(' + currentHeadline + ')')
83
.animate({top: 0},'slow', function() {
84
rotateInProgress = false;
85
if (!headlineTimeout) {
86
headlineTimeout = setTimeout(headlineRotate, 5000);
87
}
88
});
89
oldHeadline = currentHeadline;
90
}
91
};
92
headlineTimeout = setTimeout(headlineRotate,5000);
93![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
94
// On hover, clear the timeout and reset headlineTimeout to 0.
95
$('#news-feed').hover(function() {
96
clearTimeout(headlineTimeout);
97
headlineTimeout = false;
98
}, function() {
99
// Start the rotation soon when the mouse leaves.
100
if (!headlineTimeout) {
101
headlineTimeout = setTimeout(headlineRotate, 250);
102
}
103
}); //end .hover()
104
}); // end $.get()
105
}); //end .each() for #news-feed
106
});
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
79
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
80
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
81
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
82
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
83
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
84
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
85
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
86
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
87
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
88
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
89
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
90
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
91
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
92
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
93
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
94
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
95
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
96
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
97
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
98
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
99
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
100
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
101
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
102
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
103
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
104
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
105
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
106
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
each的使用 取余 rotateInProgress = true; 动画执行间调用那个函数不起作用,鼠标离开后继续执行! headlineTimeout = false; 一个函数 将其先赋值 然后执行后赋值 !! 没达到时间将赋值 false,而不执行!然后执行下一次调用函数