站内搜索: 请输入搜索关键词

当前页面: 开发资料首页 → Javascript 专题 → 原创javascript实现滚动菜单一例（小弟弟初入此地，试发文章一篇）

原创javascript实现滚动菜单一例（小弟弟初入此地，试发文章一篇）

摘要: 原创javascript实现滚动菜单一例（小弟弟初入此地，试发文章一篇）
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible"> <<使用方法>>： 只要更改”菜单组N“和”菜单项N“的文字和其具体的连接“”即可 如果要添加删除菜单个数请复制粘贴具体的“<table><tr><td>”项 <head> 菜单 var headHeight = 22;var bodyHeight = 220;var objcount = 6;var step = 20;var moving = false; function showme(obj1, obj2) { if (moving) return; moving = true; for(i=0;i= objbuttom) { countid = 1; for(i=0;i= objtop) && (idnumber < objcount)) { idnumber++; countid = objcount; for(i=document.all.tags('div').length-1;i>=0;i--) if (document.all.tags('div')[i].id == 'item'+countid+'body') { obj = document.all.tags('div')[i]; objbuttom = bodyHeight + headHeight * (countid - 2); if (countid == idnumber) { movedown(obj,objbuttom,false); break; } else movedown(obj,objbuttom,true); countid--; } } } function moveup(obj,objtop,ismove) { currenttop = parseInt(obj.style.top); if (currenttop > objtop) { obj.style.top = currenttop - step; setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1) return; } moving = ismove; } function movedown(obj,objbuttom,ismove) { currenttop = parseInt(obj.style.top); if (currenttop < objbuttom) { obj.style.top = currenttop + step; setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1) return; } moving = ismove; } function remenu() { document.all.outmenu.style.visibility = "visible" parent.menu1.cols= "18,*" ; } function remenu1(){ document.all.outmenu.style.visibility = "hidden" parent.menu1.cols= "150,*" ; } //判断是否真的要退出系统 function closeWin() { if (confirm("您确定要退出系统吗？")) { window.close(); } } </head> <body bgcolor="#ffffff" leftmargin="2" topmargin="0">
<table width="100%" border="0" height="100%" cellpadding="4" cellspacing="0"> <tr> <td id="item1head" height="20" class="headtd2" onclick="showme(item1body,this)" align="middle">菜单组一</td> </tr> <tr> <td align="middle" valign="top" class="bodytd" height="203"> <table width="100%" border="0" cellspacing="0" cellpadding="4"> <tr> <td align="middle">菜单项1</td> </tr> <tr> <td align="middle">菜单项2</td> </tr> <tr> <td align="middle">菜单项3</td> </tr> <tr> <td align="middle">菜单项4</td> </tr> <tr> <td align="center">菜单项5</td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" height="100%" cellpadding="4" cellspacing="0"> <tr> <td id="item2head" height="20" class="headtd1" onclick="showme(item2body,this)" align="middle">菜单组二</td> </tr> <tr> <td align="middle" valign="top" class="bodytd" height="203"> <table width="100%" border="0" cellspacing="0" cellpadding="4"> <tr> <td align="middle">菜单项1</td> </tr> <tr> <td align="middle">菜单项2</td> </tr> <tr> <td align="middle">菜单项3</td> </tr> <tr> <td align="middle">菜单项4</td> </tr> <tr> <td align="middle">菜单项5</td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" height="100%" cellpadding="4" cellspacing="0"> <tr> <td id="item3head" height="20" class="headtd1" onclick="showme(item3body,this)" align="middle">菜单组三</td> </tr> <tr> <td align="middle" valign="top" class="bodytd" height="203"> <table width="100%" border="0" cellspacing="0" cellpadding="4"> <tr> <td align="middle">菜单项1</td> </tr> <tr> <td align="middle">菜单项2</td> </tr> <tr> <td align="middle">菜单项3</td> </tr> <tr> <td align="middle">菜单项4</td> </tr> <tr> <td align="middle">菜单项5</td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" height="100%" cellpadding="4" cellspacing="0"> <tr> <td id="item4head" height="20" class="headtd1" onclick="showme(item4body,this)" align="middle">菜单组四</td> </tr> <tr> <td align="middle" valign="top" class="bodytd" height="203"> <table width="100%" border="0" cellspacing="0" cellpadding="3"> <tr> <td align="middle">菜单项1</td> </tr> <tr> <td align="middle">菜单项2</td> </tr> <tr> <td align="middle">菜单项3</td> </tr> <tr> <td align="middle">菜单项4</td> </tr> <tr> <td align="middle">菜单项5</td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" height="100%" cellpadding="4" cellspacing="0"> <tr> <td id="item5head" height="20" class="headtd1" onclick="showme(item5body,this)" align="middle">菜单组五</td> </tr> <tr> <td align="middle" valign="top" class="bodytd" height="203"> <table width="100%" border="0" cellspacing="0" cellpadding="3"> <tr> <td align="middle">菜单项1</td> </tr> <tr> <td align="middle">菜单项2</td> <tr> <td align="middle">菜单项3</td> </tr> <tr> <td align="middle">菜单项4</td> </tr> <tr> <td align="middle">菜单项5</td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" height="100%" cellpadding="4" cellspacing="0"> <tr> <td id="item6head" height="20" class="headtd1" onclick="closeWin()" align="middle">退出</td> </tr> <tr> <td class="bodytd" align="middle"></td> </tr> </table>
</body>
</textarea>
↑返回目录
前一篇: 日期相加的函数addDate（javascript）
后一篇: javascript 与 asp.net 的交互