JS页脚转换实现

 先上图说明功能

1.

2.

3.

4.

5.

功能如图

现在上代码：

JS部分基于jquery框架

页面部分：

 <div class="bossBox"><div class="bossBox_1"><%For i=1 to totalPage'分页页脚生成"[1],[2],[3]....." %> <a class="airfoot" href="javascript:void(0)" mce_href="javascript:void(0)" onclick="air(<%=(i-1)%>);" style="display:none">[<%=i%>]</a> <% htrml = htrml & "<option value="""&i&""">"&i&"</option>"Next %> <a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" onclick="air(0);" style="display:inline-block" mce_style="display:inline-block">首页</a><a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" onclick="prepage();" style="display:inline-block" mce_style="display:inline-block">上页</a><a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" onclick="nextpage();" style="display:inline-block" mce_style="display:inline-block">下页</a> <a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" onclick="air(<%=totalPage-1%>);" style="display:inline-block">尾页</a>转到第<select onChange="javascript:air(this.options[this.selectedIndex].value-1);"><%=htrml%></select>页</div></div>

js部分：

 var page=0;var bb;bb=0;var totalPage; totalPage=$('.airfoot').length-1;$('.air:first').css('display','block'); $('.airfoot:first').css('color','#F00');$('.airfoot').each(function(i){if(i>4) return;else $(this).css('display','inline-block')});function changePage(aa){$('.airfoot').each(function(i){$(this).css('display','none')});if(aa<=2)aa=2else if(aa>=totalPage-2)aa=totalPage-2for (i=0;i<5;i++){$(".airfoot:eq("+(aa-2+i)+")").css('display','inline-block');}}function air(aa){bb=aa;changePage(aa); $(".air").each(function(i){ if (i==(aa)) $(this).css('display','block') else $(this).css('display','none') }); $(".airfoot").each(function(i){ if (i==(aa)) $(this).css('color','#F00') else $(this).css('color','#666') }); totalpage = aa;} function prepage(){if (bb-1<0)bb=0;elsebb = bb-1;air(bb);}function nextpage(){if (bb+1>totalPage) bb = totalpage;elsebb=bb+1;air(bb);}

CSS样式：

.bossBox_1 select{ position:relative; right:0px;}.bossBox_1{ width:430px; height:20px; height:auto; text-align:right;}.bossBox_1 a{ float:left; width:23px; height:20px; margin-left:5px;}.bossBox_1 .airfoot1{width:40px; height:20px;}.bossBox_1 a:hover{text-decoration:underline}

有什么问题加我QQ:815762641

^0^