jQuery:书籍展示效果

前段时间在国外的博客上看到这个jQuery的书籍展示效果，觉得很是不错，并下载了源码，自己重新编写了CSS和JS，效果:如下

说明：因为在此页面中是通过使用iframe标签引入外部页面，加上显示页面的宽度有限，所以当鼠标移动到Info图标上时，部分内容被遮盖住，这时你可以通过外部链接查看：Demo

具体代码实现如下：（源代码下载）

1.html代码:

<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代码：

* { 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标签内加上代码：

<!--[if lt IE 7]>
<style type="text/css">
    .book { padding-right:12.5px;}
</style>
< ![end if]-->

3.xml代码：

因为代码过长的原因，不在此贴出，请阅读外部链接的源代码：XML

4.jQuery代码：

$(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\');
		});
 
	});
 
});