自动分页的导航模式

用户只需按照顺序添加即可,翻页有系统自动实现。

js 代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.     <head>   
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  5.         <script language="javascript" type="text/javascript"  
  6.             src="http://misc.home.news.cn/js/trs/blog/admin/admin_base.js"></script>   
  7.         <script language="JavaScript" type="text/JavaScript">   
  8. window.onload = function() {   
  9.     //windowInit();    
  10.     newWinInit();   
  11. }   
  12. var MOVEABLE = false;   
  13. var groups = new Array();   
  14. var groups_size = 0;   
  15. var groups_cur = 0;   
  16. function newWinInit(){   
  17.     var con = $("mainInner");   
  18.     var items = con.innerHTML.split("┆");   
  19.     var str = "";   
  20.     var k = 0;   
  21.     var group_children_size = 10;   
  22.        
  23.     //第一页为14个,以后每页为10个   
  24.     for(var i = 0; i < items.length; i += 1) {   
  25.         if(i < 13) {   
  26.             str += items[i] + "┆";   
  27.             continue;   
  28.         }   
  29.         else if(i == 13) {   
  30.             str += items[i];   
  31.             groups[k++] = str;   
  32.             str = "";   
  33.             continue;   
  34.         }   
  35.            
  36.         if((i - 14) % group_children_size != group_children_size - 1 && i != items.length - 1) {   
  37.             //如果不是最后一列,并且不是最后一个,则继续拼接字符串   
  38.             str += items[i] + "┆";   
  39.         }   
  40.         else {   
  41.             str += items[i];   
  42.             groups[k++] = str;   
  43.             str = "";   
  44.         }   
  45.     }              
  46.     if(i < 13) {   
  47.         groups[k++] = str;   
  48.     }   
  49.     groups_size = groups.length;   
  50.     groups_cur = 0;   
  51.        
  52.        
  53.     con.innerHTML = groups[0];   
  54.   
  55.     //左移的事件   
  56.     $("leftTag").onmouseover = function() {   
  57.         this.className = "leftion1";   
  58.     }   
  59.     $("leftTag").onmouseout = function() {   
  60.         this.className = "leftion";   
  61.     }   
  62.     //右移的事件   
  63.     $("rightTag").onmouseover = function() {   
  64.         this.className = "rightion1";   
  65.     }   
  66.     $("rightTag").onmouseout = function() {   
  67.         this.className = "rightion";   
  68.     }   
  69.   
  70.     //单击时切换显示   
  71.     $("leftTag").onclick = function() {   
  72.         if(groups_cur < 1) {   
  73.             groups_cur = groups_size;   
  74.         }   
  75.         var obj = $("mainInner");   
  76.   
  77.         while(obj.hasChildNodes()) {   
  78.             obj.removeChild(obj.childNodes[0]);   
  79.         }   
  80.            
  81.         obj.innerHTML = groups[--groups_cur];   
  82.         $("typeTag").innerHTML = eval(groups_cur + 1);   
  83.     }   
  84.     //右移的事件   
  85.     $("rightTag").onclick = function() {   
  86.         if(groups_cur >= groups_size - 1) {   
  87.             groups_cur = -1;   
  88.         }   
  89.   
  90.         var obj = $("mainInner");   
  91.   
  92.         while(obj.hasChildNodes()) {   
  93.             obj.removeChild(obj.childNodes[0]);   
  94.         }   
  95.            
  96.         obj.innerHTML = groups[++groups_cur];   
  97.         $("typeTag").innerHTML = eval(groups_cur + 1);   
  98.   
  99.     }   
  100. }   
  101. //当点中时高亮   
  102. var old_tarObj = null;   
  103. function showCurObj(evt) {   
  104.     var tarObj = null;   
  105.     if(window.event) {   
  106.         tarObj = window.event.srcElement;   
  107.     }   
  108.     else {   
  109.         tarObj = evt.target;   
  110.     }   
  111.        
  112.     //如果是导航链接项   
  113.     if(tarObj.tagName.toLowerCase() == "a" && tarObj.target == "leftFrame") {   
  114.         if(old_tarObj) {   
  115.             old_tarObj.style.cssText = "";   
  116.         }   
  117.         tarObj.style.cssText = "color: #fffa00;font-weight:600;";   
  118.         old_tarObj = tarObj;   
  119.     }      
  120.     delete tarObj;   
  121. }   
  122. </script>   
  123.         <link href="http://misc.home.news.cn/blog/css/top.css"  
  124.             rel="stylesheet" type="text/css">   
  125.     </head>   
  126.   
  127.     <body>   
  128.         <table width="100%" border="0" cellpadding="0" cellspacing="0"  
  129.             >   
  130.             <tr>   
  131.                 <td align="center" valign="top" class="tdbg"  
  132.                     style="padding-right:10px;">   
  133.                     <div id="username" align="right">   
  134.                     </div>   
  135.                     <div id="mainmenu" align="right">   
  136.                         <span id="rightTag" class="rightion">&nbsp;&nbsp;</span>   
  137.                         <span id="typeTag" class="cention">1</span>   
  138.                         <span id="leftTag" class="leftion">&nbsp;&nbsp;</span>   
  139.                         <span onclick="showCurObj(event);" id="mainCon"  
  140.                             style="width:700px;float:right;"> <span id="mainInner"  
  141.                             style="width:700px;"> <span><a   
  142.                                     href="#" target="leftFrame">文章</a> </span>┆<span><a   
  143.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  144.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  145.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  146.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  147.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  148.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  149.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  150.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  151.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  152.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  153.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  154.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  155.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  156.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  157.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  158.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  159.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  160.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  161.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  162.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  163.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  164.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  165.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  166.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  167.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  168.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  169.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  170.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  171.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  172.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  173.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  174.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  175.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  176.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  177.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  178.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  179.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  180.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  181.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  182.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  183.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  184.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  185.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  186.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  187.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  188.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  189.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  190.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  191.                                     href="#" target="leftFrame">博客</a> </span>┆<span><a   
  192.                                     href="#" class="width4word" target="leftFrame">abd</a> </span> </span> </span>   
  193.                     </div>   
  194.                 </td>   
  195.             </tr>   
  196.         </table>   
  197.     </body>   
  198. </html>   
  199.   

你可能感兴趣的:(JavaScript,html,css,Blog)