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.

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

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

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”.

这个HTML结构基本上是一个列表的元素和一些导航箭包容器类和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网格图片导航切换插件

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)