用客户端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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
JS数组的常见用法实例
Feb 10 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
基于vue2.0实现简单轮播图
Nov 27 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
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
在Python中使用成员运算符的示例
2015/05/13 Python
python实现文件快照加密保护的方法
2015/06/30 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
咖啡店创业计划书
2014/08/15 职场文书
思想作风建设心得体会
2014/10/22 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
期中考试复习计划
2015/01/19 职场文书
早会开场白台词大全
2015/06/01 职场文书
党员身份证明材料
2015/06/19 职场文书
酒店厨房管理制度
2015/08/06 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android