Grid Navigation Effects 提供了類似 Grid 排列及切換的外掛套件,其中還提供了多達 8 組以上的切換效果可使用。
套件名稱:Grid Navigation Effects
套件網址:N/A
作者網站:http://tympanus.net/codrops/2011/06/09/grid-navigation-effects/
套件網址:N/A
發佈日期:2011-06-09
檔案大小:20.9 KB
檔案下載:jquery.gridnav.js gridNavigation.css
引用檔案:jquery.easing.1.3.js jquery.mousewheel.js
資料下載:images.zip
參數選項說明:
檢視原始碼 JavaScript
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 | rows(選填) 描述: 一次顯示幾行 預設值: 2 navL(選填) 描述: 控制切換往上的按鈕元素 預設值: '#tj_prev' navR(選填) 描述: 控制切換往下的按鈕元素 預設值: '#tj_next' type(選填) 描述: 切換時的動畫設定 預設值: { mode: 'def', speed: 500, easing: 'jswing', factor: 50, reverse: false } mode(選填) 描述: 切換的效果方式; 允許的值有 'def'、'fade'、'seqfade'、'updown'、'sequpdown'、'showhide'、'disperse' 及 'rows' 預設值: 'def' speed(選填) 描述: 切換的動畫速度(1000毫秒 = 1秒); 此設定只針對 mode 為 'fade'、'seqfade'、'updown'、'sequpdown'、'showhide'、'disperse' 及 'rows' 有效 預設值: 500 easing(選填) 描述: 切換的動畫緩衝效果; 此設定只針對 mode 為 'fade'、'seqfade'、'updown'、'sequpdown'、'showhide'、'disperse' 及 'rows' 有效 預設值: 'jswing' factor(選填) 描述: 切換時每一個元素的動畫間隔(1000毫秒 = 1秒); 此設定只針對 mode 為 'seqfade'、'sequpdown' 及 'rows' 有效 預設值: 50 reverse(選填) 描述: 是否反轉切換效果; 此設定只針對 mode 為 'sequpdown' 有效 預設值: false |
方法說明:
檢視原始碼 JavaScript
1 2 | // 把指定的元素加上 Grid Navigation Effects 效果 $(selector).gridnav(method); |
使用範例:
檢視原始碼 JavaScript
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 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></script> <script type="text/javascript" src="jquery.gridnav.js"></script> <style type="text/css"> .tj_container{ width: 440PX; height: 220px; position: relative; margin: 0; } #tj_container ul { list-style: none; } #tj_container ul, #tj_container li { margin: 0; padding: 0; } </style> <script type="text/javascript"> $(function(){ // 把 #tj_container 加上 Grid Navigation Effects 效果 // 切換方式來依序由下往上 // 動畫時間 0.4 秒, 每一個項目的動畫間隔 0.02 秒 $('#tj_container').gridnav({ type: { mode: 'sequpdown', speed: 400, factor: 50 } }); }); </script> <body> <div id="tj_container" class="tj_container"> <div class="tj_nav"> <span id="tj_prev" class="tj_prev">Previous</span> <span id="tj_next" class="tj_next">Next</span> </div> <div class="tj_wrapper"> <ul class="tj_gallery"> <li><a href="#"><img src="images/a.jpg" alt="A" /></a></li> <li><a href="#"><img src="images/b.jpg" alt="B" /></a></li> <li><a href="#"><img src="images/c.jpg" alt="C" /></a></li> <li><a href="#"><img src="images/d.jpg" alt="D" /></a></li> <li><a href="#"><img src="images/e.jpg" alt="E" /></a></li> <li><a href="#"><img src="images/f.jpg" alt="F" /></a></li> <li><a href="#"><img src="images/g.jpg" alt="G" /></a></li> <li><a href="#"><img src="images/h.jpg" alt="H" /></a></li> <li><a href="#"><img src="images/i.jpg" alt="I" /></a></li> <li><a href="#"><img src="images/j.jpg" alt="J" /></a></li> <li><a href="#"><img src="images/k.jpg" alt="K" /></a></li> <li><a href="#"><img src="images/l.jpg" alt="L" /></a></li> <li><a href="#"><img src="images/m.jpg" alt="M" /></a></li> <li><a href="#"><img src="images/n.jpg" alt="N" /></a></li> <li><a href="#"><img src="images/o.jpg" alt="O" /></a></li> <li><a href="#"><img src="images/p.jpg" alt="P" /></a></li> <li><a href="#"><img src="images/q.jpg" alt="Q" /></a></li> <li><a href="#"><img src="images/r.jpg" alt="R" /></a></li> <li><a href="#"><img src="images/s.jpg" alt="S" /></a></li> <li><a href="#"><img src="images/t.jpg" alt="T" /></a></li> </ul> </div> </div> </body> |
真不錯的效果,謝謝男丁大的分享!!
請問顯示區塊的高度該查哪支CSS??
意思就是說如果我要改成顯示三排
是改高度嗎??
設定 rows: 3 就可以顯示三排了