手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >用客户端js实现带省略号的分页
用客户端js实现带省略号的分页
摘要:复制代码代码如下:$(function(){varn=$('.fenye>ulli:nth-child').lengthvarc=$(".f...

复制代码 代码如下:

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

<ul>

<li href="#"><a href="#"><img src="http://www.jb51.nettemplets/mysite/images/tubiao2.jpg"/></a></li>

<li href="#"><a href="#"><img src="http://www.jb51.nettemplets/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>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="http://www.jb51.nettemplets/mysite/images/tubiao4.jpg"/></a></li>

<li href="#"><a href="#"><img src="http://www.jb51.nettemplets/mysite/images/tubiao5.jpg"/></a></li>

</ul>

</div>

效果图

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

【用客户端js实现带省略号的分页】相关文章:

js+HTML5实现canvas多种颜色渐变效果的方法

Javascript客户端脚本的设计和应用

js设置document.domain实现跨域的注意点分析

jQuery实现转动随机数抽奖效果的方法

多种js图片预加载实现方式分享

jquery简单实现外部链接用新窗口打开的方法

javascript实现简单的进度条

JavaScript实现简单的数字倒计时

新页面打开实际尺寸的图片

JS实现简单路由器功能的方法

精品推荐
分类导航