<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>aaaaa</title>

<style>

a{display:block;float:left;margin-right:8px;}

.spn{display:block;float:left;}

</style>

<script src="./jquery.js"></script>

<script type="text/javascript">

$(function(){

    var $a=$("a");

    var l=$a.length;

    var s=11;//能出现个数

    var h=Number(l)-Number(1);//索引上限

    if(l>20){

    $a.slice(s,h).hide();//初始化隐藏

    $a.filter(":hidden").prev("a:visible").after("<span class='spn'>…</span>");

    $a.click(function(){

        var x=$(this).text();

        var up=Number(x)+Number(5);

        var down=Number(x)-Number(5);

        //var y=Number(x)+Number(5);

        //alert($("a:eq(z)").text());

        $("span").remove();

        $a.filter(":not(:last):not(:first)").hide().filter(function(){

            range=$(this).text();

            if(range>down && range<up) return true;

        }).show();

        $a.filter(":hidden").prev("a:visible").after("<span class='spn'>…</span>");

        return false;

    });

    }

});

</script>

</head>

<body>

<a href="http://localhost/?tag=1">0</a>

<a href="http://localhost/?tag=2">1</a>

<a href="http://localhost/?tag=3">2</a>

<a href="http://localhost/?tag=4">3</a>

<a href="http://localhost/?tag=5">4</a>

<a href="http://localhost/?tag=6">5</a>

<a href="http://localhost/?tag=7">6</a>

<a href="http://localhost/?tag=8">7</a>

<a href="http://localhost/?tag=9">8</a>

<a href="http://localhost/?tag=10">9</a>

<a href="http://localhost/?tag=11">10</a>

<a href="http://localhost/?tag=12">11</a>

<a href="http://localhost/?tag=13">12</a>

<a href="http://localhost/?tag=14">13</a>

<a href="http://localhost/?tag=15">14</a>

<a href="http://localhost/?tag=16">15</a>

<a href="http://localhost/?tag=17">16</a>

<a href="http://localhost/?tag=18">17</a>

<a href="http://localhost/?tag=19">18</a>

<a href="http://localhost/?tag=20">19</a>

<a href="http://localhost/?tag=21">20</a>

<a href="http://localhost/?tag=22">21</a>

<a href="http://localhost/?tag=23">22</a>

<a href="http://localhost/?tag=24">23</a>

<a href="http://localhost/?tag=25">24</a>

<a href="http://localhost/?tag=26">25</a>

<a href="http://localhost/?tag=27">26</a>

<a href="http://localhost/?tag=28">27</a>

<a href="http://localhost/?tag=29">28</a>

<a href="http://localhost/?tag=30">29</a>

<div class="txt"></div>

</body>

</html>

用jQuery编的一个分页小代码的更多相关文章

  1. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

  2. jQuery 一个你意想不到的代码神器！

    jQuery 一个你意想不到的代码神器! jQuery 选择器.(最简单,最基本) jquery选择器的优势: (1) 简洁的写法,$()函数 (2)支持CSS1到CSS3选择器 (3)完善的处理机制 ...

  3. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

  4. jquery自定义插件实现分页效果

    这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...

  5. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  6. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  7. jQuery实现淘宝购物车小组件

    我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...

  8. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  9. python 进行后端分页详细代码

    后端分页 两个接口 思路: 1. 先得到最大页和最小页数(1, 20) --> 传递给前端, 这样前端就可以知道有多少个页数 2. 通过传递页数得到当前页对应数据库的最大值和最小值 3. 通过s ...

随机推荐

  1. NOIp DP 1003 爆零记

    6道DP题只拿了220分,NOIp我不滚粗谁滚粗? 考试历程貌似并没有什么可说的QAQ,就是不停的来回推方程和写崩的状态中. 正经题解 六道题其实除了第六道比较恶心..其他的都还算可以. truck ...

  2. 重新注册iis的.NET Framework版本

    说一个简单的方法,在VS2012.win7 sp1下亲测可用. 在开始菜单中找到VS 2012开发人员命令提示,然后执行命令:aspnet_regiis.exe -i 运行完成后截图如下:

  3. Lambda表达式 和 Expression<T>

    经常用的Lambda表达式 返回的是  Expression<T> 格式 public class ActivityService { private readonly List<A ...

  4. datagrid---写后台数据交互

    1.action的写法: 开头写包,此外,我们还有一个和action并列的package-info.java的文件,该文件是包的信息,media为我的文件夹里面放三个文件夹(action,bpo,ma ...

  5. 9月19日上午JavaScript数组

    数组 一.定义 1.数组的文字定义 广义上说,数组是相同类型数据的集合.但是对于强类型语言和弱类型语言来说其特点是不一样的.强类型语言数组和集合有以下特点. 数组强类型语言:1.数组里面只能存放相同数 ...

  6. CodeForces 701C They Are Everywhere （滑动窗口）

    题目链接:http://codeforces.com/problemset/problem/701/C 题意:找到字符串中能包含所有元素的最短字符串长度. 利用“滑动窗口”解题 解题思路: 1. 遍历 ...

  7. ecshop怎么添加配送方式

    步骤1.打开includes\modules\shipping文件夹,把sto_express.php复制多一份,重名为tt_express.php: 步骤2.打开tt_express.php,ctr ...

  8. #if __IPHONE_OS_VERSION_MAX_ALLOWED < __IPHONE_8_0

    头文件处理 #import <UIKit/UIKit.h> #if __IPHONE_OS_VERSION_MAX_ALLOWED < __IPHONE_8_0 #else #imp ...

  9. Hibernate整合C3P0实现连接池

    Hibernate整合C3P0实现连接池 hibernate中可以使用默认的连接池,无论功能与性能都不如C3PO(网友反映,我没有测试过),C3P0是一个开源的JDBC连接池,它实现了数据源和JNDI ...

  10. Windwos下常用DOS命令

    1.添加用户命令: net user 用户名 密码 /add 2.将用户加入组的命令: net localgroup administrators 用户名 /add 3.在dos命令行模式下启用用户: ...