jQuery:书籍展示效果

前段时间在国外的博客上看到这个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 = '&lt;li class="book"&gt;';
			html += '&lt;a class="info" href="' + link + '"&gt;';
			html += '&lt;img src="images/books_info.gif" alt="more info" /&gt;';
			html += '&lt;/a&gt;';			
			html += '&lt;a class="thumb" href="' + link + '" title="' + title + '"&gt;';
			html += '&lt;img src="' + imageSrc + '" alt="' +  title + '" /&gt;';
			html += '&lt;/a&gt;';
			html += '&lt;/li&gt;';
 
			$('#books ul').append($(html));
 
			var bookToolTip = '&lt;div id="books_ToolTip' + index + '" class="books-tooltip"&gt;';
			bookToolTip += '&lt;div class="books_pointer_left"&gt;&lt;/div&gt;';
			bookToolTip += '&lt;div class="books-info"&gt;';
			bookToolTip += '&lt;p&gt;' + title + '(by&lt;em&gt;' + author + '&lt;/em&gt;)&lt;/p&gt;';
			bookToolTip += '&lt;p&gt;&lt;img src="images/stars_' + average_rating + '.gif" /&gt;(' + total + ')&lt;/p&gt;';
			bookToolTip += '&lt;/div&gt;';
			bookToolTip += '&lt;/div&gt;';
			$('body').append($(bookToolTip));
 
		});
 
		//显示每页的书本
		var show =function(start, end) { 
 
			if(end &gt;= length) {
				end = length;
			}
 
			$('div.showing').empty();
			$('&lt;p&gt;Viewing ' + (start+1) + ' - '+ end + ' of ' + length + '&lt;/p&gt;').appendTo($('div.showing'));
 
			$('#books ul li').hide().slice(start, end).fadeIn();
 
			if(currentPage &lt;= 1) {
				$('.prev').fadeOut('fast');
			} else {
				$('.prev').fadeIn('fast');
			}
			if(currentPage &gt;= 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');
		});
 
	});
 
});
posted @ 2010-06-29 14:17  与时俱进  阅读(1390)  评论(0)  编辑  收藏  举报
友情链接：同里老宅院民居客栈