用客户端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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP数据过滤的方法
2013/10/30 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP 裁剪图片
2021/03/09 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
javascript几个易错点记录
2014/11/26 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
微信小程序 聊天室简单实现
2017/04/19 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Python变量赋值的秘密分享
2018/04/03 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python多线程的退出控制实现
2020/08/10 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
学生吸烟检讨书
2014/09/14 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书