分享5种风格的 jQuery 分页效果【附代码】

最新推荐文章于 2022-11-10 08:39:30 发布

「已注销」

最新推荐文章于 2022-11-10 08:39:30 发布

阅读量173

点赞数

分类专栏：前端文章标签： jquery 分页插件分页效果分页代码

原文链接：https://www.mk2048.com/blog/blog.php?id=habcjajc2jcb&title=%E5%88%86%E4%BA%AB5%E7%A7%8D%E9%A3%8E%E6%A0%BC%E7%9A%84+jQuery+%E5%88%86%E9%A1%B5%E6%95%88%E6%9E%9C%E3%80%90%E9%99%84%E4%BB%A3%E7%A0%81%E3%80%91

版权

前端专栏收录该内容

1143 篇文章 3 订阅

订阅专栏

　　jPaginate 是一款非常精致的分页插件，提供了五种不同风格的分页效果，支持鼠标悬停翻页，快速分页功能。这款插件还提供了丰富的配置选项，你可以根据需要进行设置。

效果演示源码下载

各个效果的使用示例代码：

		$(function() {
			$("#demo1").paginate({
				count 		: 100,
				start 		: 1,
				display     : 8,
				border					: true,
				border_color			: '#fff',
				text_color  			: '#fff',
				background_color    	: 'black',	
				border_hover_color		: '#ccc',
				text_hover_color  		: '#000',
				background_hover_color	: '#fff', 
				images					: false,
				mouse					: 'press'
			});
			$("#demo2").paginate({
				count 		: 50,
				start 		: 5,
				display     : 10,
				border					: false,
				text_color  			: '#888',
				background_color    	: '#EEE',	
				text_hover_color  		: 'black',
				background_hover_color	: '#CFCFCF'
			});
			$("#demo3").paginate({
				count 		: 50,
				start 		: 20,
				display     : 12,
				border					: true,
				border_color			: '#BEF8B8',
				text_color  			: '#68BA64',
				background_color    	: '#E3F2E1',	
				border_hover_color		: '#68BA64',
				text_hover_color  		: 'black',
				background_hover_color	: '#CAE6C6', 
				rotate      : false,
				images		: false,
				mouse		: 'press'
			});
			$("#demo4").paginate({
				count 		: 50,
				start 		: 20,
				display     : 12,
				border					: false,
				text_color  			: '#79B5E3',
				background_color    	: 'none',	
				text_hover_color  		: '#2573AF',
				background_hover_color	: 'none', 
				images		: false,
				mouse		: 'press'
			});
			$("#demo5").paginate({
				count 		: 10,
				start 		: 1,
				display     : 7,
				border					: true,
				border_color			: '#fff',
				text_color  			: '#fff',
				background_color    	: 'black',	
				border_hover_color		: '#ccc',
				text_hover_color  		: '#000',
				background_hover_color	: '#fff', 
				images					: false,
				mouse					: 'press',
				onChange     			: function(page){
											$('._current','#paginationdemo').removeClass('_current').hide();
											$('#p' page).addClass('_current').show();
										  }
			});
		});

您可能感兴趣的相关文章

本文链接：分享5种风格的 jQuery 分页效果【附代码】

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

更多专业前端知识，请上【猿2048】www.mk2048.com