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 = '<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'); }); }); }); |