用jQuery编的一个分页小代码
<!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编的一个分页小代码的更多相关文章
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- jQuery 一个你意想不到的代码神器！
jQuery 一个你意想不到的代码神器! jQuery 选择器.(最简单,最基本) jquery选择器的优势: (1) 简洁的写法,$()函数 (2)支持CSS1到CSS3选择器 (3)完善的处理机制 ...
- 非常不错的一个JS分页效果代码
这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...
- jquery自定义插件实现分页效果
这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
- js/jquery/html前端开发常用到代码片段
1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...
- Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...
- jQuery实现淘宝购物车小组件
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- python 进行后端分页详细代码
后端分页 两个接口 思路: 1. 先得到最大页和最小页数(1, 20) --> 传递给前端, 这样前端就可以知道有多少个页数 2. 通过传递页数得到当前页对应数据库的最大值和最小值 3. 通过s ...
随机推荐
- chrome使用技巧
chrome使用技巧 chrome对于开发人员来说,绝对是一个神器.下面,介绍关于它的一些小技巧: 1.利用chrome快速定位source中的资源. 我之前一般如果查找每个文件,都是打开控制台,在s ...
- photoshop工具使用的简单介绍
photoshop工具使用的简单介绍 我所用PhotoShop版本号是cs6,这里对其主要功能做一个简单介绍. 第一部分: 首先,ps的界面主要分为了6部分: 一.最上面的一行的菜单栏,菜单中有:文件 ...
- BZOJ3207: 花神的嘲讽计划Ⅰ
显然hash,然后stl随便搞. #include<bits/stdc++.h> #define N 100005 using namespace std; typedef unsigne ...
- 【原】webpack结合gulp打包
在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去 ...
- Windows7、8无法访问其他计算机共享盘
Windows7.8无法访问其他计算机共享盘 WIN7 访问共享的时候提示用户名和密码不正确,在XP系统上可以正常访问 一.win+r gpedit.msc 进行组策略如图所示 二.wind ...
- centos linux安装telnet 过程及问题(源于内部tomcat网站，外部无法访问)
首先本地没有telnet客户端及服务器 root权限下安装 yum install telnet yum install telnet-server vi /etc/xinetd.d/telnet 这 ...
- 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
- Android学习笔记——SQLite
该工程的功能是实现关于数据库的操作,即creat.update.insert.query.delete 调试的时候请用模拟器,用真机调试的时候进入cmd-adb shell,再进入cd data/da ...
- lamp环境搭建（ubuntu）
系统:Ubuntu14.04 方法一.最简单的在线安装 (参考网址:http://os.51cto.com/art/201307/405333.htm) 具体过程: [1]打开终端,执行命令 # su ...
- Aspect Oriented Programming using Interceptors within Castle Windsor and ABP Framework AOP
http://www.codeproject.com/Articles/1080517/Aspect-Oriented-Programming-using-Interceptors-wit Downl ...