Grid Navigation Effects带箭头的十种JQuery网格图片导航切换插件

Grid Navigation Effects带箭头的十种JQuery网格图片导航切换插件
 点击预览  点击下载

Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.



You can use the mousewheel to navigate through the thumbnails.


The HTML structure that the script is based on is basically a list of element and some navigation arrows wrapped by a container with class and id “tj_container”.


Let’s see an example for using the sequential move/fade:


  1. $('#tj_container').gridnav({ 
  2.     rows    : 2, 
  3.     navL    : '#tj_prev'
  4.     navR    : '#tj_next'
  5.     type    : { 
  6.         mode        : 'sequpdown',   
  7.         speed       : 400,           
  8.         easing      : '',            
  9.         factor      : 50,            
  10.         reverse     : false          
  11.     } 
  12. }); 

rows: the number of rows to be shown in the grid(行数)

navL/navR: the selectors for the previous and next navigation elements(上下箭头)

mode: the type of animation; you can use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows(效果类型)

speed: the speed of the animation for fade, seqfade, updown, sequpdown, showhide, disperse, rows(播放速度)

easing: the easing effect for fade, seqfade, updown, sequpdown, showhide, disperse, rows

factor: delay between each item animation for seqfade, sequpdown; amount of pixels the row move when using rows

reverse: for reversing the order when using sequpdown

转载请注明:代码家园 » Grid Navigation Effects带箭头的十种JQuery网格图片导航切换插件