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)" οnclick="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)" οnclick="air(0);" style="display:inline-block" mce_style="display:inline-block">首頁</a> <a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" οnclick="prepage();" style="display:inline-block" mce_style="display:inline-block">上頁</a> <a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" οnclick="nextpage();" style="display:inline-block" mce_style="display:inline-block">下頁</a> <a class="airfoot1" href="javascript:void(0)" mce_href="javascript:void(0)" οnclick="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=2 else if(aa>=totalPage-2) aa=totalPage-2 for (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; else bb = bb-1; air(bb); } function nextpage(){ if (bb+1>totalPage) bb = totalpage; else bb=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^