渐变的竖向导航菜单

人气：　来源：本站原创　作者：佚名　所属栏目：导航类　[切换到繁體中文]

介绍：透明渐变的表格菜单变化脚本，挺漂亮实用的。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_渐变的竖向导航菜单</title>
<style><!--body,td{font-size: 12px;}--></style>
<SCRIPT LANGUAGE="JavaScript">

function locktrueie(myform){myform.ie.checked=true;}
function lockfalsenet(myform){myform.nets.checked=true;}
function goToURL() { window.location = "http://www.javascriptsource.com"; }

function nochange(mycheckbox)
{
   if (mycheckbox.checked == true){mycheckbox.checked = false;}else{mycheckbox.checked = true;}
}

</script>
<style>
. tds
 {
  background-Color:silver;
  width:100;
  height:20;
  text-align:center;
  border:1px solid gray;
  font-size:10px;font-family: "tahoma";
  filter:alpha(opacity=45);
  -moz-opacity:45%;
  cursor:hand;
 }

</style>
</head>
<body bgcolor="" 无>
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<script language="javascript">
nOpac = 50
nPlus = 2
nMin = 1
speed = 30
timer = null; 
timer2 = null;

var ie5=(document.all && document.getElementById);
var ns6=(!document.all && document.getElementById);

function fadeImg2(teller)
{
 apl[teller][1] = "Up";
 changes();
}

function fadeImgend2(teller)
{
 apl[teller][1] = "Down";
 setTimeout("changes()",50);
}

function changes()
{
 next_loop = true;
 for (i=0;i<apl.length;i++)
 {
  obj = link_table.rows[i].cells[0];
  opacity = apl[i][0]
  if (apl[i][1] == "Up")
  {
     opacity += nPlus;
     apl[i][0] = opacity;
     if (apl[i][0] > 105) 
      {apl[i][1] = "";}
     else
     {next_loop = false;}
	 nOpac = opacity;
  }
  else
  {
  if (apl[i][1] == "Down")
  {
     opacity -= nMin;
     apl[i][0] = opacity;
     if (apl[i][0] < 45) 
      {apl[i][1] = "";}
     else
     {next_loop = false;}
	 nOpac = opacity;
  }
  }
  if(ie5){ 
	obj.style.filter="alpha(opacity="+opacity+")";
    }
  if(ns6){ 
   	obj.style.MozOpacity = opacity + '%';
   }
 }
 if (next_loop == false)
  {
   timer = setTimeout("changes()",speed);
  }
  else
  {
   clearTimeout(timer);
  }
}

//for each link option you need to make a new Array;
var apl = new Array();
apl[0] = new Array(45,"");
apl[1] = new Array(45,"");
apl[2] = new Array(45,"");
apl[3] = new Array(45,"");
apl[4] = new Array(45,"");
apl[5] = new Array(45,"");
//expl: apl[6] = new Array(45,"");
</script>
<table cellpadding=0 cellspacing=0 name=link_table id=link_table>
  <tr> 
    <td class="tds" onMouseOver="fadeImg2(0)" onMouseOut="fadeImgend2(0)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">Home</td>
  </tr>
  <tr> 
    <td class="tds" onMouseOver="fadeImg2(1)" onMouseOut="fadeImgend2(1)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">New</td>
  </tr>
  <tr> 
    <td class="tds" onMouseOver="fadeImg2(2)" onMouseOut="fadeImgend2(2)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">About</td>
  </tr>
  <tr> 
    <td class="tds" onMouseOver="fadeImg2(3)" onMouseOut="fadeImgend2(3)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">Pictures</td>
  </tr>
  <tr> 
    <td class="tds" onMouseOver="fadeImg2(4)" onMouseOut="fadeImgend2(4)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">Partners</td>
  </tr>
  <tr> 
    <td class="tds" onMouseOver="fadeImg2(5)" onMouseOut="fadeImgend2(5)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">Contact</td>
  </tr>
</table>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：无
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

function locktrueie(myform){myform.ie.checked=true;}
function lockfalsenet(myform){myform.nets.checked=true;}
function goToURL() { window.location = "http://www.javascriptsource.com"; }

function nochange(mycheckbox)
{
if (mycheckbox.checked == true){mycheckbox.checked = false;}else{mycheckbox.checked = true;}
}

</script>
<style>
. tds
{
  background-Color:silver;
  width:100;
  height:20;
  text-align:center;
  border:1px solid gray;
  font-size:10px;font-family: "tahoma";
  filter:alpha(opacity=45);
  -moz-opacity:45%;
  cursor:hand;
}

</style>

var ie5=(document.all && document.getElementById);
var ns6=(!document.all && document.getElementById);

function fadeImg2(teller)
{
apl[teller][1] = "Up";
changes();
}

function fadeImgend2(teller)
{
apl[teller][1] = "Down";
setTimeout("changes()",50);
}

//for each link option you need to make a new Array;
var apl = new Array();
apl[0] = new Array(45,"");
apl[1] = new Array(45,"");
apl[2] = new Array(45,"");
apl[3] = new Array(45,"");
apl[4] = new Array(45,"");
apl[5] = new Array(45,"");
//expl: apl[6] = new Array(45,"");
</script>
<table cellpadding=0 cellspacing=0 name=link_table id=link_table>
  <tr>
    <td class="tds" onMouseOver="fadeImg2(0)" onMouseOut="fadeImgend2(0)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">Home</td>
  </tr>
  <tr>
    <td class="tds" onMouseOver="fadeImg2(1)" onMouseOut="fadeImgend2(1)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">New</td>
  </tr>
  <tr>
    <td class="tds" onMouseOver="fadeImg2(2)" onMouseOut="fadeImgend2(2)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">About</td>
  </tr>
  <tr>
    <td class="tds" onMouseOver="fadeImg2(3)" onMouseOut="fadeImgend2(3)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">Pictures</td>
  </tr>
  <tr>
    <td class="tds" onMouseOver="fadeImg2(4)" onMouseOut="fadeImgend2(4)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">Partners</td>
  </tr>
  <tr>
    <td class="tds" onMouseOver="fadeImg2(5)" onMouseOut="fadeImgend2(5)" onClick="window.location='#';" style="border:1px solid gray;background-color:silver;width:100;text-align:center">Contact</td>
  </tr>
</table>