本站公告: 暂无公告....

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

前端开发 兰亭楼 0评论 420浏览

 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 分页效果【附代码】

发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址