用客户端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创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
canvas绘制七巧板
Feb 03 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
AngularJS中的promise用法分析
May 19 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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教程 预定义变量
2009/10/23 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
node基于async/await对mysql进行封装
2019/06/20 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Python Deque 模块使用详解
2014/07/04 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
舞蹈比赛获奖感言
2014/02/04 职场文书
补充协议书范本
2014/04/23 职场文书
采购员岗位职责
2015/02/03 职场文书
民事调解协议书
2016/03/21 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android