用客户端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应用之禁止抓屏、复制、打印
Feb 21 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
手机号码,密码正则验证
Sep 04 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python模块之StringIO使用示例
2015/04/08 Python
python正则实现计算器功能
2017/12/14 Python
NumPy 数组使用大全
2019/04/25 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python退出循环的方法
2020/06/18 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
优秀实习生感言
2014/03/01 职场文书
产品委托授权书范本
2014/09/16 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
部队个人年终总结
2015/03/02 职场文书
材料采购员岗位职责
2015/04/03 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
关于JavaScript轮播图的实现
2021/11/20 Javascript
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js