用客户端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 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php生成二维码
2015/08/10 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
js 单引号 传递方法
2009/06/22 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
微信小程序实现搜索历史功能
2020/03/26 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
简单实现python画圆功能
2018/01/25 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python秒算24点实现及原理详解
2019/07/29 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
四年大学生活的个人自我评价
2013/12/11 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
2014年客房部工作总结
2014/11/22 职场文书
班主任先进事迹材料
2014/12/17 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android