分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件，提供了五种不同风格的分页效果，支持鼠标悬停翻页，快速分页功能。这款插件还提供了丰富的配置选项，你可以根据需要进行设置。
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();
}
});
});
您可能感兴趣的相关文章
版权声明：本文为lhb25原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。