用客户端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实现仿Windows关机效果
Mar 10 Javascript
javascript模仿msgbox提示效果代码
Jun 10 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
JS实现随机点名器
Apr 12 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
Vue与React的区别和优势对比
Dec 18 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
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python如何写个俄罗斯方块
2020/11/06 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
幼儿园大班教学反思
2014/02/10 职场文书
初中教师业务学习材料
2014/05/12 职场文书
学校志愿者活动总结
2014/06/27 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis