分享5种风格的 jQuery 分页效果【附代码】
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(); } }); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。