用客户端js实现带省略号的分页


Posted in Javascript onApril 27, 2013
<script type="text/javascript"> 
$(function(){ 
var n =$('.fenye >ul li:nth-child').length 
var c=$(".fenye ul li").index($('.fenye ul li.thisclass')) 
var setp1=c 
var setp2=n-c; //后余 
if(n>10){ 
if(c>2){ 
for (i=2;i<parseInt(c);i++){ 
$(".fenye ul li").eq(i).hide() 
} 
} 
for(y=c+5;y<setp2+3;y++){ 
$(".fenye ul li").eq(y).hide() 
} 
$(".fenye ul li").eq(n-3).text('...'); 
}else if(n==10){ 
$(".fenye ul li").eq(n-3).text('...'); 
} }) 
</script> 
<div class="fenye"> 
<ul class="clear"> 
<li href="#"><a href="#"><img src="/templets/mysite/images/tubiao2.jpg"/></a></li> 
<li href="#"><a href="#"><img src="/templets/mysite/images/tubiao3.jpg"/></a></li> 
<li><a href='list_3_14.html'>141</a></li> 
<li><a href='list_3_14.html'>1432</a></li> 
<li><a href='list_3_14.html'>143</a></li> 
<li><a href='list_3_14.html'>143</a></li> 
<li class="thisclass">13</li> 
<li><a href='list_3_14.html'>14</a></li> 
<li><a href='list_3_11.html'>11</a></li> 
<li><a href='list_3_15.html'>1512</a></li> 
<li><a href='list_3_15.html'>1513</a></li> 
<li><a href='list_3_15.html'>151</a></li> 
<li><a href='list_3_15.html'>151</a></li> 
<li><a href='list_3_15.html'>152</a></li> 
<li><a href='list_3_15.html'>152</a></li> 
<li><a href='list_3_15.html'>152</a></li> 
<li><a href='list_3_15.html'>152</a></li> 
<li><a href='list_3_15.html'>153</a></li> 
<li><a href='list_3_15.html'>154</a></li> 
<li><a href='list_3_15.html'>155</a></li> 
<li href="#"><a href="#"><img src="/templets/mysite/images/tubiao4.jpg"/></a></li> 
<li href="#"><a href="#"><img src="/templets/mysite/images/tubiao5.jpg"/></a></li> 
</ul> 
</div>

效果图
用客户端js实现带省略号的分页
Javascript 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 #Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 #Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 #Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 #Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 #Javascript
基于jquery中children()与find()的区别介绍
Apr 26 #Javascript
基于jQuery选择器的整理集合
Apr 26 #Javascript
You might like
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
JavaScript的目的分析
2007/01/05 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python绘制KS曲线的实现方法
2018/08/13 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python用match()函数爬数据方法详解
2019/07/23 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
家长对小学生的评语
2014/01/28 职场文书
施工安全责任书
2014/04/14 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
刑事撤诉申请书
2015/05/18 职场文书
交通事故案件代理词
2015/05/23 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
使用python绘制分组对比柱状图
2022/04/21 Python