用客户端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 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
ES6使用export和import实现模块化的方法
Sep 10 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
vue生命周期的探索
Apr 03 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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读取IMAP邮件
2006/10/09 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
Node.js 基础教程之全局对象
2017/08/06 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python数据类型学习笔记
2016/01/13 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
使用Python封装excel操作指南
2021/01/29 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
文明之星事迹材料
2014/05/09 职场文书
投标服务承诺书
2014/05/28 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
教师年度个人总结
2015/02/11 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
Python编写冷笑话生成器
2022/04/20 Python