用客户端js实现带省略号的分页

代码如下:

<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>

效果图

赞 (0)

相关推荐

  • javascript 实现文本使用省略号替代（超出固定高度的情况）

    javascript 实现文本使用省略号替代（超出固定高度的情况）

    javascript 实现文本使用省略号替代 实现效果图: 如果图片不清晰,建议放大浏览器的尺寸进行查看 1.这里是配合jQuery来进行替换的,所以jquery还是必备的,毕竟是轻量级,而且对各大的浏览器兼容性也好.所以开始页面引入jquery文件. 2.在页面添加样式. <style type="text/css"> .text { background: #EEE;/*方便演示设置颜色*/ /*width: 410px;*/ height: 40px; /*高度是必须

  • AngularJs实现分页功能不带省略号的代码

    angularJs 的分页重点体现在对 过滤器 的使用.这个过滤器也并不复杂. 首先上 html 代码: <!DOCTYPE html> <html ng-app="demoApp"> <head> <meta charset="utf-"> <meta name="viewport" content="width=device-width"> <title&g

  • js下拉框里超过变成省略号

    我们 www.jb51.net js下拉框省略号 下拉框里的字太多了,下拉框会变长,然后把版面挤乱了,多余的如何显示成省略号? 或者限制住下拉框的跨度也行? style="width:100px;" 这种已经试过了,没用!/option> function cutOption(selectObj , length) { this.selectObj = selectObj; this.length = length; } cutOption.prototype.init = fu

  • js实现文字超出部分用省略号代替实例代码

    js实现文字超出部分用省略号代替实例代码

    话不多说,我们直接看代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

  • js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法

  • javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

    javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(-)显示,这样,按照习惯,人们都会知道这儿有文字被省略了.css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写: {width:27em; white-space:nowrap; text-overflow:ellipsis; -o

  • 用客户端js实现带省略号的分页

    用客户端js实现带省略号的分页

    复制代码 代码如下: <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

  • 基于BootStrap的前端分页带省略号和上下页效果

    基于BootStrap的前端分页带省略号和上下页效果

    bootstrap前端分页 自带效果. 首先是百度下获得资源 http://blog.csdn.net/u013025627/article/details/50485327 其实15年的时候我师兄给过我一个文档不知道在哪儿搞得,我靠那是示例之多.现在嘛只有找代码片段自己写 好了好了这个东西也就是没有上一页 下一页的.于是我加了而且修改了下源代码.扯淡的是我不能用bootstrap的效果,为什么?因为我们有自己的样式,so我得有个下过自己写 首先看看源代码我修改注释的部分 这个now是UI做的效

  • js实现带关闭按钮始终显示在网页最底部工具条的方法

    本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法.分享给大家供大家参考.具体如下: 这是一款很实用的代码,给网页加入一个始终显示在浏览器窗口底部的工具栏,可以在上面放上公告,联系人等等信息,此代码的工具条还带有关闭按钮,可以随时关闭 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

  • JS实现带圆弧背景渐变效果的导航菜单代码

    JS实现带圆弧背景渐变效果的导航菜单代码

    本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

  • js实现带圆角的两级导航菜单效果代码

    js实现带圆角的两级导航菜单效果代码

    本文实例讲述了js实现带圆角的两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快.使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留作收藏使用.真心不错的蓝色导航条代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC

  • 客户端js性能优化小技巧整理

    下面是一些关于客户端JS性能的一些优化的小技巧: 1. 关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2. 如果需要遍历数组,应该先缓存数组长度var len=arr.len

  • JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

    JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

    本文实例讲述了JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码.分享给大家供大家参考.具体如下: 这是一款阿里妈妈网站顶部banner代码,采用滑出的方式,一个经典的工具条代码,可以当作菜单来用,同时还有完善的功能,可以适时关闭工具条,整体效果设计美观,简洁漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-float-banner-alimama-style-codes/ 具体代码如下: <!DOCTYPE ht

  • js实现带农历和八字等信息的日历特效

    js实现带农历和八字等信息的日历特效

    自己也尝试着做了一下,收获蛮大,掌握了js日历特效的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 本文实例为大家分享了js实现带农历等信息的日历特效,代码量很大,供大家参考,具体内容如下 效果图: 实现代码: <HTML> <HEAD> <TITLE>万年历</TITLE> <META content="农历; 阳历; 月历; 节日; 时区; 节气; 八字; 干支; 生肖; gregorian

  • js实现带缓冲效果的仿QQ面板折叠菜单代码

    js实现带缓冲效果的仿QQ面板折叠菜单代码

    本文实例讲述了js实现带缓冲效果的仿QQ面板折叠菜单代码.分享给大家供大家参考.具体如下: 带缓冲效果的仿QQ面板折叠菜单代码,使用方法:调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-buffer-style-qq-menu-codes

随机推荐