在Web和圖形設(shè)計(jì)的世界，jquery它是使用最廣泛的技術(shù)。 在他的幫助下，我們可以創(chuàng)建很多偉大的事情。豐富的jQuery插件，在互聯(lián)網(wǎng)上，使我們能夠毫不費(fèi)力地創(chuàng)建幻燈片，表格，動(dòng)畫(huà)和其他各種良好的效果

在本教程中，我將展示如何創(chuàng)建簡(jiǎn)約 jQuery 圖片庫(kù)。您可以使用它來(lái)展示您最新的作品或作為相冊(cè)使用。您可以通過(guò)類別菜單對(duì)項(xiàng)目進(jìn)行排序

?

DEMO

?

HTML 代碼

?首先創(chuàng)建一個(gè)UL列表，確保每個(gè)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> 現(xiàn)在，創(chuàng)建您想要顯示的項(xiàng)目的第二個(gè)列表. 結(jié)構(gòu)如下. 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類來(lái)進(jìn)行分類, rel=”prettyPhoto[ gallery ]“ – 當(dāng)縮略圖被點(diǎn)擊的時(shí)候張開(kāi)一張大的圖片.

CSS 代碼

項(xiàng)目的 CSS 代碼是非常簡(jiǎn)單: 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 屬性圖像預(yù)覽的代碼

jQuery("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'fast',slideshow:5000,theme:'light_rounded',show_title:false,overlay_gallery: false});}

DEMO

?本文鏈接：前端開(kāi)發(fā)推薦-創(chuàng)建一個(gè)精美的jquery圖片庫(kù)效果

轉(zhuǎn)載于:https://www.cnblogs.com/58top/archive/2012/11/15/jquery-photo-gallery.html

總結(jié)

以上是生活随笔為你收集整理的前端开发推荐-创建一个精美的jquery图片库效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。