jQuery网格换插件Grid Navigation Effects

所属分类：UI-布局

23663 325 查看评论 (4)

分享到微信朋友圈

查看演示立即下载

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

今天我们将分享一些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