在Web和图形设计的世界，jquery它是使用最广泛的技术。 在他的帮助下，我们可以创建很多伟大的事情。丰富的jQuery插件，在互联网上，使我们能够毫不费力地创建幻灯片，表格，动画和其他各种良好的效果
在本教程中，我将展示如何创建简约 jQuery 图片库。您可以使用它来展示您最新的作品或作为相册使用。您可以通过类别菜单对项目进行排序
DEMO
HTML 代码
首先创建一个UL列表，确保每个LI里面具有唯一的类别名称
1 <ul class="portfolio-categ filter"> 2 <li>categories:</li> 3 <li class="all active"><a href="#">All</a></li> 4 <li class="cat-item-1"><a href="#" title="Category 1">Category 1</a> 5 </li> 6 <li class="cat-item-2"><a href="#" title="Category 2">Category 2</a> 7 </li> 8 <li class="cat-item-3"><a href="#" title="Category 3">Category 3</a> 9 </li> 10 <li class="cat-item-4"><a href="#" title="Category 4">Category 4</a> 11 </li> 12 </ul>
现在，创建您想要显示的项目的第二个列表. 结构如下.
1 <li class="portfolio-item2" data-id="id-0" data-type="cat-item-4"> 2 <div> 3 <span class="image-block"> 4 <a class="image-zoom" href="images/big/pic1.jpg" rel="prettyPhoto[ gallery ]" title="Wall-E"><img width="225" height="140" src="images/thumbs/p1.jpg" alt="Wall-E" title="Wall-E" /> 5 </a> 6 </span> 7 <div class="home-portfolio-text"> 8 <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="Wall-E">Wall-E</a></h2> 9 <p class="post-subtitle-portfolio">released: 2008</p> 10 </div> 11 </div> 12 </li>
这里有3件事情你需要注意: data-id – 这里是唯一的, data-type – 指定他的CLASS类来进行分类, rel=”prettyPhoto[ gallery ]“ – 当缩略图被点击的时候张开一张大的图片.
CSS 代码
项目的 CSS 代码是非常简单:
1 .image-block{ display:block;position: relative;} 2 .image-block img{border: 1px solid #d5d5d5; border-radius: 4px 4px 4px 4px;background:#FFFFFF;padding:10px;} 3 .image-block img:hover{border: 1px solid #A9CF54;box-shadow:0 0 5px #A9CF54;} 4 .portfolio-area li{float: left;margin: 0 12px 20px 0;overflow: hidden;width: 245px;padding:5px;} 5 .home-portfolio-text{margin-top:10px;}
为每次类切换编写jquery代码
// Clone applications to get a second collectionvar $data = $(".portfolio-area").clone();//NOTE: Only filter on the main portfolio page, not on the subcategory pages$('.portfolio-categ li').click(function(e) {$(".filter li").removeClass("active");// Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)var filterClass=$(this).attr('class').split(' ').slice(-1)[0];if (filterClass == 'all') {var $filteredData = $data.find('.portfolio-item2');} else {var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');}$(".portfolio-area").quicksand($filteredData, {duration: 600,adjustHeight: 'auto'}, function () {lightboxPhoto();});$(this).addClass("active");return false;});
这里是 prettyPhoto 属性图像预览的代码
jQuery("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'fast',slideshow:5000,theme:'light_rounded',show_title:false,overlay_gallery: false});} DEMO
本文链接：前端开发推荐-创建一个精美的jquery图片库效果
