前段时间在国外的博客上看到这个jQuery的书籍展示效果，觉得很是不错，并下载了源码，自己重新编写了CSS和JS，效果:如下
说明：因为在此页面中是通过使用iframe标签引入外部页面，加上显示页面的宽度有限，所以当鼠标移动到Info图标上时，部分内容被遮盖住，这时你可以通过外部链接查看：Demo
具体代码实现如下：（源代码下载）
1.html代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="books">
<div class="overclear buttons">
<a href="#" class="prev"><img src="images/books_prev.gif" alt="Previous" /></a>
<div class="showing"><!-- showing --></div>
<a href="#" class="next"><img src="images/books_next.gif" alt="Next" /></a>
</div>
<div class="overclear top">
<img src="images/books_left_top.gif" alt="" class="float_left" />
<img src="images/books_right_top.gif" alt="" class="float_right" />
</div>
<div class="inner">
<ul class="overclear">
<li class="loader"><!-- loader --></li>
</ul>
</div>
<div class="overclear btm">
<img src="images/books_left_btm.gif" alt="" class="float_left" />
<img src="images/books_right_btm.gif" alt="" class="float_right" />
</div>
</div>
|
2.CSS代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| * { margin:0; padding:0;}
body { font:12px/16px Verdana, Geneva, sans-serif; color:#000;}
img { border:0;}
a { text-decoration:none; outline:none; hide-focus:expression(this.hideFocus=true);}
ul { list-style:none;}
#books { width:500px;}
.prev img, .next img { width:40px; height:30px;}
.top img, .btm img { width:20px; height:20px;}
.overclear { overflow:hidden; height:1%;}
.float_left { float:left;}
.float_right { float:right;}
.top { background:url(images/books_top.gif) repeat-x;}
.btm { background:url(images/books_btm.gif) repeat-x;}
.buttons { position:relative; height:32px; margin-bottom:5px;}
.prev { position:absolute; top:0; left:0;}
.next { position:absolute; top:0; right:0;}
.showing { margin:0 60px; height:80%; font-family:Tahoma, Geneva, sans-serif; text-align:center; padding-top:4px;}
.inner { height:125px; background:url(images/books_left_mid.gif) repeat-y;}
.inner ul { background:url(images/books_right_mid.gif) repeat-y right; height:100%; padding-left:25px;}
.loader { background:url(images/books_loader.gif) no-repeat 50% 50%;; height:100%;}
.book { width:90px; float:left; padding-right:25px; position:relative; padding-bottom:3px;}
.book .info { position:absolute; top:107px; left:88px;}
.book .thumb img { padding:3px; border:1px solid #ddd;}
.books-tooltip { display:none; position:absolute; background:#fff; z-index:2;}
.books-tooltip { width:320px;}
.books-info { border:1px solid #ccc; padding:10px; height:70px;}
|
为了兼容ie6，需在head标签内加上代码：
1
2
3
4
5
| <!--[if lt IE 7]>
<style type="text/css">
.book { padding-right:12.5px;}
</style>
< ![end if]-->
|
3.xml代码：
因为代码过长的原因，不在此贴出，请阅读外部链接的源代码：XML
4.jQuery代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| $(document).ready(function() {
var perNum = 4; //每页显示的书本数目
var currentPage = 1; //默认显示第一页
var startPos = 0; //默认从第一本书开始显示
var endPos = 4; //显示4本书
//从xml中获得数据，并与html结合
$.get('books.xml', function(data){
$('div.inner ul').empty();
var length = $('book', data).length;
$('book', data).each(function(index) {
var $book = $(this);
var link = $book.find('href').text();
var title = $book.find('title').text();
var author = $book.find('author').text();
var imageSrc = $book.find('src').text();
var total = $book.find('total').text();
var average_rating = $book.find('average_rating').text();
var html = '<li class="book">';
html += '<a class="info" href="' + link + '">';
html += '<img src="images/books_info.gif" alt="more info" />';
html += '</a>';
html += '<a class="thumb" href="' + link + '" title="' + title + '">';
html += '<img src="' + imageSrc + '" alt="' + title + '" />';
html += '</a>';
html += '</li>';
$('#books ul').append($(html));
var bookToolTip = '<div id="books_ToolTip' + index + '" class="books-tooltip">';
bookToolTip += '<div class="books_pointer_left"></div>';
bookToolTip += '<div class="books-info">';
bookToolTip += '<p>' + title + '(by<em>' + author + '</em>)</p>';
bookToolTip += '<p><img src="images/stars_' + average_rating + '.gif" />(' + total + ')</p>';
bookToolTip += '</div>';
bookToolTip += '</div>';
$('body').append($(bookToolTip));
});
//显示每页的书本
var show =function(start, end) {
if(end >= length) {
end = length;
}
$('div.showing').empty();
$('<p>Viewing ' + (start+1) + ' - '+ end + ' of ' + length + '</p>').appendTo($('div.showing'));
$('#books ul li').hide().slice(start, end).fadeIn();
if(currentPage <= 1) {
$('.prev').fadeOut('fast');
} else {
$('.prev').fadeIn('fast');
}
if(currentPage >= length / perNum) {
$('.next').fadeOut('fast');
} else {
$('.next').fadeIn('fast');
}
};
show(startPos, endPos);
//显示前一页
$('.prev').click(function() {
currentPage --;
startPos = perNum * (currentPage - 1);
endPos = perNum * currentPage;
show(startPos, endPos);
});
//显示下一页
$('.next').click(function() {
currentPage ++;
startPos = perNum * (currentPage - 1);
endPos = perNum * currentPage;
show(startPos, endPos);
});
//鼠标移动到Info图标上时，显示书本的描述信息
$('.info').css({'opacity': '0.9'}).hover(function() {
//$('a.info').index(this) 获得该超链接的index
var offset = $(this).offset()
var left = offset.left + 20;
var top = offset.top + 20;
$('#books_ToolTip' + $('a.info').index(this)).css({'opacity': '0.7', 'left': left, 'top': top}).fadeIn();
}, function() {
$('#books_ToolTip' + $('a.info').index(this)).fadeOut('fast');
});
});
});
|
扫一扫
1219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
