Welcome, Old Sport!

网格导航效果 CSS & jQuery

by ilikecss ON 2011/06/15 12996

Grid Navigation Effects今天,我想分享一些巧妙的使用jQuery网格导航效果。在我们的例子中,将告诉你十种方法如何浏览的缩略图集。我们将讨论几种可行的,看看如何应用效果。查看演示页面,然后鼠标点选下面横排英文导航来选择你需要的效果。

让我们来看一下这些参数的具体作用:

$('#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 – 每个seqfade的延时,sequpdown项目动画;行的像素数量
  • reverse: for reversing the order when using sequpdown – 是否旋转
1条评论
  1. #1

    LZ什么的最好了说道:

    这个很好~




TOP