用客户端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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
小程序实现发表评论功能
Jul 06 Javascript
JavaScript多种图形实现代码实例
Jun 28 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
dedecms模版制作使用方法
2007/04/03 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
django使用图片延时加载引起后台404错误
2017/04/18 Python
python使用RNN实现文本分类
2018/05/24 Python
python同步两个文件夹下的内容
2019/08/29 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
python 实现波浪滤镜特效
2020/12/02 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
2014年党员承诺书范文
2014/05/20 职场文书
2014年销售工作总结
2014/12/01 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
超级礼物观后感
2015/06/15 职场文书
感恩教育观后感
2015/06/17 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python