用客户端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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP时间戳使用实例代码
2008/06/07 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
php实现算术验证码功能
2018/12/05 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
百度移动版的url编码解码示例
2014/04/29 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
详解Python中的strftime()方法的使用
2015/05/22 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python 通过文件夹导入包的操作
2020/06/01 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
物理学专业求职信
2014/07/04 职场文书
公务员个人年终总结
2015/02/12 职场文书
小学少先队活动总结
2015/05/08 职场文书
Go获取两个时区的时间差
2022/04/20 Golang
Python first-order-model实现让照片动起来
2022/06/25 Python