用客户端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 相关文章推荐
JQuery 弹出框定位实现方法
Dec 02 Javascript
JavaScript闭包详解
Feb 02 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 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中eval函数的危害与正确禁用方法
2014/06/30 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
django框架auth模块用法实例详解
2019/12/10 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
教师远程培训感言
2014/03/06 职场文书
员工教育培训协议书
2014/09/27 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
mysql数据库实现设置字段长度
2022/06/10 MySQL