jquery可滑动的分页页码25175,专业教育软件开发,数字化项目建设,专业软件开发，制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
        <head>
        <title>jquery可滑动的分页页码 by 25175</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="Design Corp" content="顺通网络" />
<meta name="Author" content="powered by 25175">
<meta name="description" content="jquery可滑动的分页页码,25175-你我一起舞-软件定制服务"/>
<meta name="Keywords" content="jquery可滑动的分页页码" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
        <style>
body { background: #a7c7dc url(bg.png) repeat-x top left; font-family: verdana; padding:0px; margin:0px; letter-spacing:2px; }
.header { position:absolute; top:0px; left:0px; width:100%; height:80px; }
.header h1 { color:#fff; font-size: 38px; margin:0px 0px 0px 30px; font-weight:100; line-height:80px; padding:0px; }
.footer { width:100%; margin:10px 0px 5px 0px; }
a img { border:none; outline:none; }
.content { margin-top:100px; padding:0px; bottom:0px; }
.about { width:100%; height:400px; background:transparent url(about.png) repeat-x top left; border-top:2px solid #ccc; border-bottom:2px solid #000; }
.about .text { width:16%; margin:5px 2% 10px 2%; height:380px; float:left; color:#FCFEF3; font-size: 16px; text-align:justify; letter-spacing:0px; }
.about .text h1 { border-bottom: 1px dashed #ccc; color:#fff; }
.demo { width:580px; padding:10px; margin:10px auto; border: 1px solid #fff; background-color:#f7f7f7; }
h1 { color:#404347; margin:5px 30px 20px 0px; font-weight:100; }
.pagedemo { border: 1px solid #CCC; width:310px; margin:2px; padding:50px 10px; text-align:center; background-color:white; }
</style>
        </head>
        <body>
<div class="header">
        </div>
     <div id="paginationdemo" class="demo">
    <h1>Demo 5</h1>
    <div id="p1" class="pagedemo _current" style="">Page 1</div>
    <div id="p2" class="pagedemo" style="display:none;">Page 2</div>
    <div id="p3" class="pagedemo" style="display:none;">Page 3</div>
    <div id="p4" class="pagedemo" style="display:none;">Page 4</div>
    <div id="p5" class="pagedemo" style="display:none;">Page 5</div>
    <div id="p6" class="pagedemo" style="display:none;">Page 6</div>
    <div id="p7" class="pagedemo" style="display:none;">Page 7</div>
    <div id="p8" class="pagedemo" style="display:none;">Page 8</div>
    <div id="p9" class="pagedemo" style="display:none;">Page 9</div>
    <div id="p10" class="pagedemo" style="display:none;">Page 10</div>
    <div id="demo5"> </div>
</div>
        </div>


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="jquery.paginate.js" type="text/javascript"></script>
<script type="text/javascript">
       $(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();
                                          }
           });
       });
       </script>
<a href="http://www.25175.com" title="25175">25175</a>
</body>
</html>

关于我们

新手上路

支付方式

商家入驻