jQuery网格换插件Grid Navigation Effects

 查看演示  website  立即下载

今天我们将分享一些JQuery网格导航插件，在我们的例子中将告诉你10种利用缩略图实现的导航效果，我们还将看一下怎么使用这些效果。

具体的一些效果请点击预览来查看。

这个HTML结构基本上是一个列表的元素和一些导航箭包容器类和ID”tj_container”

让我们看一下例子：

$('#tj_container').gridnav({ 
    rows    : 2, 
    navL    : '#tj_prev', 
    navR    : '#tj_next', 
    type    : { 
        mode        : 'sequpdown',   
        speed       : 400,           
        easing      : '',            
        factor      : 50,            
        reverse     : false          
    } 
});

• 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

PREVIOUS:
NEXT:
jQuery下拉框插件jquery.select.js
html5 SVG自定义复选框和单选按钮选中样式