jquery.gridrotator實(shí)現(xiàn)響應(yīng)式圖片展示畫廊效果
jquery.gridrotator是一款非常實(shí)用的響應(yīng)式圖片展示畫廊插件。這款圖片展示畫廊插件將圖片像網(wǎng)格一樣排列,然后隨機(jī)將某個(gè)格子中的圖片翻轉(zhuǎn)顯示另一張圖片。共有6種效果。
HTML結(jié)構(gòu):
HTML結(jié)構(gòu)非常簡(jiǎn)單。
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <ul> <li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li> <li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li> <!-- ... --> </ul> </div>
調(diào)用插件
$(function() { $( '#ri-grid' ).gridrotator(); });
注意別忘了引入jQuery和jquery.gridrotator.js文件。
可選參數(shù)
// number of rows rows : 4, // number of columns columns : 10, // rows/columns for different screen widths // i.e. w768 is for screens smaller than 768 pixels w1024 : { rows : 3, columns : 8 }, w768 : { rows : 3, columns : 7 }, w480 : { rows : 3, columns : 5 }, w320 : { rows : 2, columns : 4 }, w240 : { rows : 2, columns : 3 }, // step: number of items that are replaced at the same time // random || [some number] // note: for performance issues, the number should not be > options.maxStep step : 'random', maxStep : 3, // prevent user to click the items preventClick : true, // animation type // showHide || fadeInOut || slideLeft || // slideRight || slideTop || slideBottom || // rotateLeft || rotateRight || rotateTop || // rotateBottom || scale || rotate3d || // rotateLeftScale || rotateRightScale || // rotateTopScale || rotateBottomScale || random animType : 'random', // animation speed animSpeed : 500, // animation easings animEasingOut : 'linear', animEasingIn : 'linear', // the item(s) will be replaced every 3 seconds // note: for performance issues, the time "can't" be < 300 ms interval : 3000, // if false the animations will not start // use false if onhover is true for example slideshow : true, // if true the items will switch when hovered onhover : false, // ids of elements that shouldn't change nochange : []
當(dāng)你定義網(wǎng)格大小的時(shí)候,你要注意的是不是所有的圖片都會(huì)在網(wǎng)格中立刻顯示。舉個(gè)例子,你有50張圖片,定義了4行5列,那么會(huì)有20張圖片在網(wǎng)格中顯示,其它30張用來(lái)做圖片翻轉(zhuǎn)切換。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- Android App開發(fā)中使用RecyclerView實(shí)現(xiàn)Gallery畫廊的實(shí)例
- jquery實(shí)現(xiàn)帶縮略圖的可定制高度畫廊效果(5種)
- javascript實(shí)現(xiàn)支持移動(dòng)設(shè)備畫廊
- jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫廊效果實(shí)例
- 10款新鮮出爐的 jQuery 插件(Ajax 插件,有幻燈片、圖片畫廊、菜單等)
- 五個(gè)jQuery圖片畫廊插件 推薦
- CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- 原生javascript+css3編寫的3D魔方動(dòng)畫旋扭特效
- JS 控制CSS樣式表
- JS+CSS3實(shí)現(xiàn)超炫的散列畫廊特效
相關(guān)文章
juqery 學(xué)習(xí)之五 文檔處理 包裹、替換、刪除、復(fù)制
這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素(它是由所提供的HTML標(biāo)記代碼動(dòng)態(tài)生成的),并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個(gè)祖先元素就是包裹元素。2011-02-02JQuery EasyUI學(xué)習(xí)教程之datagrid 添加、修改、刪除操作
這篇文章主要介紹了JQuery EasyUI datagrid 添加、修改、刪除操作的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jquery在ie7下選擇器的問題導(dǎo)致append失效的解決方法
這篇文章主要介紹了jquery在ie7下選擇器的問題導(dǎo)致append失效的解決方法2016-01-01jquery實(shí)現(xiàn)抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)抽獎(jiǎng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10jQuery網(wǎng)頁(yè)選項(xiàng)卡插件rTabs用法實(shí)例分析
這篇文章主要介紹了jQuery網(wǎng)頁(yè)選項(xiàng)卡插件rTabs用法,較為詳細(xì)的分析了jquery選項(xiàng)卡插件rTabs的定義、實(shí)現(xiàn)及使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08