JQuery插件Quicksand實(shí)現(xiàn)超炫的動(dòng)畫(huà)洗牌效果
Quicksand是一款基于jQuery的插件,能對(duì)頁(yè)面上的元素進(jìn)行重新排序及過(guò)濾,并且有非常不錯(cuò)的洗牌過(guò)渡動(dòng)畫(huà)效果,可以應(yīng)用在很多項(xiàng)目中來(lái)增強(qiáng)用戶體驗(yàn)。本文以實(shí)際項(xiàng)目應(yīng)用來(lái)講解Quicksand的使用。
XHTML
<div id="nav"> <ul> <li id="all" class="cur">所有功能模塊</li> <li id="app">應(yīng)用程序</li> <li id="sys">系統(tǒng)管理</li> </ul> </div> <ul id="list" class="image-grid"> <li id="id-1" class="app"> <img src="images/birth.gif" width="80" height="60" alt="" /> <strong>生日祝福</strong></li> <li id="id-2" class="app"> <img src="images/festival.gif" width="80" height="60" alt="" /> <strong>節(jié)日祝福</strong></li> <li id="id-3" class="sys"> <img src="images/jifen.gif" width="80" height="60" alt="" /> <strong>積分管理</strong></li> ....N多l(xiāng)i </ul>
XHTML結(jié)構(gòu)由一個(gè)導(dǎo)航條和一個(gè)內(nèi)容列表組成。在內(nèi)容列表#list里,我給每個(gè)li都加了一個(gè)id屬性,這個(gè)是為了方便Quicksand插件調(diào)用。
CSS
#nav{height:36px; margin:10px auto; border-bottom:1px solid #36c} #nav ul{list-style:none; padding-left:120px} #nav ul li{float:left; height:34px; line-height:34px; margin-left:6px; padding:0px 12px; border-left:1px solid #d3d3d3; border-right:1px solid #d3d3d3; border-top:1px solid #d3d3d3; background:#f7f7f7; cursor:pointer} #nav ul li.cur{height:35px; background:#36c; color:#fff} .image-grid{zoom:1} .image-grid li{width: 82px; height:100px; margin: 20px 0 0 35px; float:left; text-align: center; line-height:18px;color: #686f74;overflow:hidden;} .image-grid li img,.image-grid li strong{display:block;}
我給導(dǎo)航條#nav設(shè)置了選項(xiàng)卡風(fēng)格,并設(shè)置選中狀態(tài)#nav ul li.cur的樣式。列表內(nèi)容區(qū)也設(shè)置了每張圖片的固定高度和寬度。
jQuery
首先,復(fù)制列表區(qū)的內(nèi)容:
var $data=$("#list").clone();
然后,來(lái)實(shí)現(xiàn)選項(xiàng)卡風(fēng)格,當(dāng)點(diǎn)擊導(dǎo)航時(shí),給當(dāng)前點(diǎn)擊的項(xiàng)加上選中的樣式,同時(shí)其他項(xiàng)移除選中狀態(tài)的樣式:
$("#nav ul li").click(function(){ $(this).addClass("cur"); $(this).siblings().removeClass("cur"); });
接著,繼續(xù)在單擊時(shí)間里,獲取當(dāng)前點(diǎn)擊選項(xiàng)的ID,通過(guò)判斷ID值,獲取數(shù)據(jù)源$source,最后調(diào)用quicksand插件。完整的代碼如下:
$("#nav ul li").click(function(){ $(this).addClass("cur"); $(this).siblings().removeClass("cur"); var id = $(this).attr("id"); if(id=="all"){ var $source=$data.find("li"); }else{ var $source=$data.find("li[class="+id+"]"); } $("#list").quicksand($source,{ duration: 1000, attribute: 'id', easing: 'swing' }); }); });
Quicksand插件提供了幾個(gè)參數(shù)可配置:
duration:過(guò)渡動(dòng)畫(huà)的時(shí)間,以毫秒為單位。
attribute:關(guān)聯(lián)數(shù)據(jù)的屬性,本例設(shè)置為id。
easing:動(dòng)畫(huà)緩沖方式。
還有一個(gè)方法enhancement:function(c) {}可以自定義函數(shù)調(diào)用。
順便提一下,IE6下沒(méi)有過(guò)渡動(dòng)畫(huà)效果,IE7+,以及其他高級(jí)瀏覽器均測(cè)試通過(guò)。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- Jquery插件之多圖片異步上傳
- jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
- 強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
- 跟我一起學(xué)寫(xiě)jQuery插件開(kāi)發(fā)方法(附完整實(shí)例及下載)
- 基于Jquery插件開(kāi)發(fā)之圖片放大鏡效果(仿淘寶)
- jquery插件lazyload.js延遲加載圖片的使用方法
- 分享2個(gè)jQuery插件--jquery.fileupload與artdialog
- jQuery插件原來(lái)如此簡(jiǎn)單 jQuery插件的機(jī)制及實(shí)戰(zhàn)
- HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果(附demo源碼下載)
相關(guān)文章
jQuery實(shí)現(xiàn)的動(dòng)態(tài)伸縮導(dǎo)航菜單實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的動(dòng)態(tài)伸縮導(dǎo)航菜單,實(shí)例分析了jQuery鼠標(biāo)事件及animate、hide等方法的使用技巧,需要的朋友可以參考下2015-05-05原來(lái)Jquery.load的方法可以一直load下去
使用jQuery.load方法加載一個(gè)網(wǎng)頁(yè),那么這個(gè)網(wǎng)頁(yè)內(nèi)部的js代碼是否能夠執(zhí)行呢,答案是肯定的,這就相當(dāng)于把load的內(nèi)容與主頁(yè)面進(jìn)行了合并一樣2011-03-037款吸引人眼球的jQuery/CSS3特效實(shí)例分享
jQuery和CSS3對(duì)于web前端開(kāi)發(fā)肯定用得也比較多,接下來(lái)分享一些由jQuery和CSS3制作成的特效,希望對(duì)哪些喜歡學(xué)習(xí)特效的朋友有所幫助2013-04-04jQuery應(yīng)用之jQuery鏈用法實(shí)例
這篇文章主要介紹了jQuery應(yīng)用之jQuery鏈用法,實(shí)例形式分析了jQuery鏈的原理及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01jquery實(shí)現(xiàn)圖片燈箱明暗的遮罩效果
這篇文章主要介紹了jquery實(shí)現(xiàn)圖片燈箱明暗的遮罩效果,有需要的朋友可以參考一下2013-11-11基于jQuery實(shí)現(xiàn)列表循環(huán)滾動(dòng)小技巧(超簡(jiǎn)單)
只要能夠不停地把第一個(gè)item移動(dòng)到末尾,其余的自會(huì)往上填補(bǔ)空缺,填補(bǔ)的過(guò)程用動(dòng)畫(huà)放慢些,就能有不斷滾動(dòng)的視覺(jué)效果了,這種效果基于jquery怎么實(shí)現(xiàn)呢?下面小編給大家?guī)?lái)了jQuery列表循環(huán)滾動(dòng)效果的實(shí)現(xiàn)思路代碼,一起看看吧2021-08-08