用客户端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 tips提示效果
Apr 03 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
vue实现的请求服务器端API接口示例
May 25 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
wordpress之wp-settings.php
2007/08/17 PHP
php强制运行广告的方法
2014/12/01 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python3的socket使用方法详解
2020/02/18 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
师生聚会感言
2014/01/26 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
最美护士演讲稿
2014/08/27 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
导游词之山东孔庙
2019/11/04 职场文书
PHP新手指南
2021/04/01 PHP