用客户端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 相关文章推荐
利用毫秒减值计算时长的js代码
Sep 22 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
vue3种table表格选项个数的控制方法
Apr 14 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下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python2.x与Python3.x的区别
2016/01/14 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
护理个人求职信范文
2014/01/08 职场文书
建筑项目策划书
2014/01/13 职场文书
亲子读书活动方案
2014/02/22 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
出国签证在职证明
2014/09/20 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python