javascript特效之----菜单实现的上下框架效果
广告投放★自助友情CMS落伍广告联盟晒乐广告联盟脉动广告联盟品味广告联盟
广告位可自定样式联系QQ:4285248个文字广告月20元广告联系QQ:428524广告位可自定样式
8个文字广告月20元黄金广告位每月20元广告位可自定样式联系QQ:428524广告位可自定样式
左旋肉碱、全国包邮
买二送一、无效退款

文章浏览→建站指南代码特效→javascript特效之----菜单实现的上下框架效果

javascript特效之----菜单实现的上下框架效果
javascript特效之----菜单实现的上下框架效果
脚本说明:
第一步:把如下代码加入<body>区域中
<script>
var Num=5;  //这里是增加选项卡的数目
var carNum=2+Num
function document.onselectstart()
{
var obj=event.srcElement
 if(obj.tagName=="SPAN")
 {
 return false;
 }
}
function document.onmousedown()
{
 var obj=event.srcElement
 var pobj=obj.parentElement.id;
 if(obj.className=="span")
 {
  for(i=1;i<carNum;i++)
  {
   if(pobj==("btn"+i))
   {
   document.all("td"+i).style.backgroundColor="menu"
   document.all("btn"+i).style.height=20
   content(i)
   }
   else
   {
   document.all("td"+i).style.backgroundColor="white"
   document.all("btn"+i).style.height=18
   }
  }
 }
}
function content(i)
{
//这里是菜单名
 mnuItem(1,"第一项")
 mnuItem(2,"图片世界")
 mnuItem(3,"第三个内容")
 mnuItem(4,"表格")
 mnuItem(5,"滚动字幕")
 mnuItem(6,"www.jzzy.com")
//End
 if(i==1)
 {
 span1.innerHTML="<input type=radio checkedname=a>男<input name=a type=radio>女<br>"
 +"<input><br><input><br><inputtype=submit>"
 }
 if(i==2)
 {
 span1.innerHTML="<img src=fw.gif>"
 }
 if(i==3)
 {
 span1.innerHTML="<h1>第三个内容</h1>"}
 if(i==4)
 {
 span1.innerHTML="<table border=1width=100%><td>第四个内容,表格</td></tr>"
 +"<tr><td>aaaaaaaa</td></tr>"
 +"<tr><td>bbbbbbbb</td></tr>"
 +"<tr><td>ccccccccc</td></tr></table>"
 }
 if(i==5)
 {
 span1.innerHTML="<marquee>"
 +"这是第五个内容"
 +"啦啦..?</marquee>"
 }
 if(i==6)
 {
 span1.innerHTML="<font color=red>"
 +"欢迎访问www.jzzy.com"
 +"</font>"
 }
}
function mnuItem(i,con)
{
 document.all("MenuName"+i).innerText=con
}
</script>
<style>td{font-size:9pt}
.span{
 cursor:default;
 padding-left:5;
 padding-top:2;
 padding-right:5;
 padding-bottom:0;
 width:100%;
 height:100%;
 }
</style>
<p>
<table width=0 onselectstart="return false" bgcolor=menualign=center><tr><td>
<table cellpadding=0 cellspacing=0 onselectstart="returnfalse">
  <tr height=20>
 <td valign=bottom>
  <table cellspacing=0 cellpadding=0bgcolor=menu>
   <tr>
   <td width=1height=1></td><td width=1 height=1></td>
   <tdbgcolor=white></td><td></td><td></td>
   </tr>
   <tr><td width=1height=1></td><td width=1 height=1bgcolor=white></td>
   <td></td><tdbgcolor=black></td><td></td>
   </tr>
   <tr><td width=1bgcolor=white></td><td width=1height=1></td>
   <td id=btn1height=20><span class=span id=MenuName1> </span></td><td width=1bgcolor=gray></td><td bgcolor=blackwidth=1></td>
   </tr>
   <tr><tdbgcolor=white></td><td colspan=4 height=1 bgcolor=menuid=td1></td>
   </tr>
  </table>
 </td>
 <script>
for(i=2;i<carNum;i++)
{
 tdBody="<td valign=bottom>"
 tdBody+="<table cellspacing=0 cellpadding=0bgcolor=menu>"
 tdBody+="<tr>"
 tdBody+="<td width=1height=1><\/td><td width=1height=1><\/td>"
 tdBody+="<tdbgcolor=white><\/td><td></td><td></td>"
 tdBody+="<\/tr>"
 tdBody+="<tr><td width=1height=1><\/td><td width=1 height=1bgcolor=white><\/td>"
 tdBody+="<td></td><tdbgcolor=black><\/td><td></td>"
 tdBody+="<\/tr>"
 tdBody+="<tr><td width=1bgcolor=white><\/td><td width=1height=1><\/td>"
 tdBody+="<td id=btn"+i+" height=18><spanclass=span id=MenuName"+i+"> <\/span></td><td width=1bgcolor=gray><\/td><td bgcolor=blackwidth=1><\/td>"
 tdBody+="<\/tr>"
 tdBody+="<tr><tdbgcolor=white><\/td><td colspan=4 height=1bgcolor=white id=td"+i+"><\/td>"
 tdBody+="<\/tr>"
 tdBody+="<\/table>"
 tdBody+="<\/td>";
document.write(tdBody)
}
</script>
</td>
<td style="border-bottom:1 white solid" width=50> </td></tr>
</table>
<div style="padding:10;width:100%;height:200;border-left:1 whitesolid;border-right:2 outset;border-bottom:2 outset">
<span id=span1></span><!--这里是内容-->
</div>
</td></tr></table>

第二步:把<body>中的内容改为:
<body  onload=content(1) onselectstart="returnfalse">
所属分类:建站指南代码特效    作者:新浪博客    时间:2010-11-20 0:00:00

文章导航