asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
menu

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>主菜单</title>
</head>

<body>
<SCRIPT language=JavaScript>
var currTimerlinePoint = 0;
var totalTimerlineFrames = 2;
var timerlineTimer;
var leftLine = 50;
var timerIn;
var timerOut;


var timerlineArray = new Array();
timerlineArray[0]='';
timerlineArray[1]='menuItemOut()';

function runTimerline()
{
//if (totalTimerlineFrames > currTimerlinePoint)
//  {
//  eval( timerlineArray[currTimerlinePoint]);
//  currTimerlinePoint ++;
//  }
//else {currTimerlinePoint = 0; clearTimeout(window.timerlineTimer); return false;}

//window.timerlineTimer = setTimeout('runTimerline()',1000);

window.timerlineTimer = setTimeout('menuItemOut()',500);

}

function stopTimerline()
{
clearTimeout(window.timerlineTimer);
//currTimerlinePoint = 0;
}
 
function menuItemIn()
{
    if( leftLine != 150)
     {
  item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20;
     item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20;
     item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20;
     item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20;
     item15.style.pixelLeft += 20; item15.filters.alpha.opacity += 20;
     item16.style.pixelLeft -= 20; item16.filters.alpha.opacity += 20;
     item17.style.pixelLeft += 20; item17.filters.alpha.opacity += 20;
     item18.style.pixelLeft -= 20; item18.filters.alpha.opacity += 20;
     item19.style.pixelLeft += 20; item19.filters.alpha.opacity += 20;
     item20.style.pixelLeft -= 20; item20.filters.alpha.opacity += 20;
     leftLine += 20;
  }
  else
     {
  clearTimeout(window.timerIn);
     return false;
  }
  timerIn=window.setTimeout('menuItemIn()',1);
}

function menuItemOut()
{
   clearTimeout(window.timerIn);
  if (leftLine != 50)
     {
      item11.style.pixelLeft -= 20; item11.filters.alpha.opacity -= 20;
      item12.style.pixelLeft += 20; item12.filters.alpha.opacity -= 20;
      item13.style.pixelLeft -= 20; item13.filters.alpha.opacity -= 20;
      item14.style.pixelLeft += 20; item14.filters.alpha.opacity -= 20;
      item15.style.pixelLeft -= 20; item15.filters.alpha.opacity -= 20;
      item16.style.pixelLeft += 20; item16.filters.alpha.opacity -= 20;
      item17.style.pixelLeft -= 20; item17.filters.alpha.opacity -= 20;
      item18.style.pixelLeft += 20; item18.filters.alpha.opacity -= 20;
      item19.style.pixelLeft -= 20; item19.filters.alpha.opacity -= 20;
      item20.style.pixelLeft += 20; item20.filters.alpha.opacity -= 20;
      leftLine -= 20;
   }
   else
     {
  clearTimeout(window.timerOut);
     return false;
     }
  timerOut=window.setTimeout("menuItemOut()",1);
}


self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
</SCRIPT>
<DIV style="LEFT: 0px; POSITION: absolute; TOP: -30px">
<DIV id=menu01 onmouseover=stopTimerline();menuItemIn()
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 1; LEFT: 150px; BORDER-LEFT: #000000 1px; WIDTH: 100px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 33px; HEIGHT: 19px; BACKGROUND-COLOR: #000099; layer-background-color: #000099"
onmouseout=runTimerline() align=center><FONT color=white>主菜单</DIV>
<DIV id=item11
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 2; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 55px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项一</DIV>
<DIV id=item12
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 3; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 77px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项二</DIV>
<DIV id=item13
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 4; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 99px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项三</DIV>
<DIV id=item14
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 5; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 121px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项四</DIV>
<DIV id=item15
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 143px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项五</DIV>
<DIV id=item16
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 165px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项六</DIV>
<DIV id=item17
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 187px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项七</DIV>
<DIV id=item18
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 209px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项八</DIV>
<DIV id=item19
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 231px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项九</DIV>
<DIV id=item20
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 253px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项十</DIV></DIV>

</body>

</html>

posted on 2006-12-06 15:42 汪杰 阅读(317) 评论(3)  编辑 收藏 引用 所属分类: javascript

FeedBack:
# re: menu
2006-12-06 15:42 | 汪杰
<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>国家政策</title>
</head>

<body>

<div onclick="fnOut();" onmouseover="fnStop();this.style.backgroundColor= 'yellow'" onmouseout="fnOut();this.style.backgroundColor= 'white'" style="cursor:pointer; background: white; border: 1px solid red; position: absolute; width: 69px; height: 20px; z-index: 1; FILTER: alpha(opacity=0); left:50px; top:130px" id="layer5">
国家政策</div>

<div onclick="fnOut();" onmouseover="fnStop();this.style.backgroundColor= 'yellow'" onmouseout="fnOut();this.style.backgroundColor= 'white'" style="cursor:pointer; background: white; border: 1px solid red; position: absolute; width: 69px; height: 20px; z-index: 1; FILTER: alpha(opacity=0); left:50px; top:90px" id="layer3">
国家政策</div>

<div onclick="fnOut();" onmouseover="fnStop();fnMenuIn();" onmouseout="fnOut()" style="cursor:pointer; background: yellow; border: 1px solid red; position: absolute; width: 69px; height: 20px; z-index: 1; FILTER: alpha(opacity=100); left:150px; top:30px" id="layer6">
政策法规</div>

<div onclick="fnOut();" onmouseover="fnStop();this.style.backgroundColor= 'yellow'" onmouseout="fnOut();this.style.backgroundColor= 'white'" style="cursor:pointer; background: white; border: 1px solid red; position: absolute; width: 69px; height: 20px; z-index: 1; FILTER: alpha(opacity=0); left:50px; top:50px" id="layer1">
国家政策</div>

<div onclick="fnOut();" onmouseover="fnStop();this.style.backgroundColor= 'yellow'" onmouseout="fnOut();this.style.backgroundColor= 'white'" style="cursor:pointer; background: white; border: 1px solid red; position: absolute; width: 69px; height: 20px; z-index: 1; FILTER: alpha(opacity=0); left:250px; top:110px" id="layer4">
国家政策</div>

<div onclick="fnOut();" onmouseover="fnStop();this.style.backgroundColor= 'yellow'" onmouseout="fnOut();this.style.backgroundColor= 'white'" style="cursor:pointer; background: white; border: 1px solid red; position: absolute; width: 69px; height: 20px; z-index: 1; FILTER: alpha(opacity=0); left:250px; top:70px" id="layer2">
国家政策</div>
<script defer>
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
var iLeftLine=50;
var vTimeOut,vTimerID,vTimeOut1;
function fnOut() {
vTimeOut1=setTimeout("fnMenuOut()",100);
}
function fnStop() {
clearTimeout(vTimeOut1);
}
function fnMenuIn() {
if(iLeftLine!=150) {
layer1.style.pixelLeft+=20;layer1.filters.alpha.opacity+=20;
layer2.style.pixelLeft-=20;layer2.filters.alpha.opacity+=20;
layer3.style.pixelLeft+=20;layer3.filters.alpha.opacity+=20;
layer4.style.pixelLeft-=20;layer4.filters.alpha.opacity+=20;
layer5.style.pixelLeft+=20;layer5.filters.alpha.opacity+=20;
iLeftLine+=20;
}
else {
if(vTimerID) {
clearTimeout(vTimerID);
}
return false;
}
vTimerID=setTimeout("fnMenuIn()",5)
}
function fnMenuOut() {
if(vTimerID) {
clearTimeout(vTimerID);
}
if(iLeftLine!=50) {
layer1.style.pixelLeft-=20;layer1.filters.alpha.opacity-=20;
layer2.style.pixelLeft+=20;layer2.filters.alpha.opacity-=20;
layer3.style.pixelLeft-=20;layer3.filters.alpha.opacity-=20;
layer4.style.pixelLeft+=20;layer4.filters.alpha.opacity-=20;
layer5.style.pixelLeft-=20;layer5.filters.alpha.opacity-=20;
iLeftLine-=20;
}
else {
if(vTimeOut) {
clearTimeout(vTimeOut);
}
return false;
}
vTimeOut=setTimeout("fnMenuOut()",5)
}
</script>
</body>

</html>   回复  更多评论
  
# re: menu
2006-12-07 16:25 | 汪杰
<script defer>
function create(iId,iTop,iLeft,iWidth,iHeight,n) {
var item=["浙江","宁波","余姚","梁弄","上贤","汪巷"]
var menu0=document.createElement("div");
menu0.id=iId;
menu0.style.position="absolute";
menu0.style.top=iTop;
menu0.style.left=iLeft;
menu0.style.width=iWidth;
menu0.style.height=iHeight;
menu0.style.border="1px solid red";
menu0.style.backgroundColor="yellow";
menu0.innerHTML="Menu";
menu0.onmouseover=fnMouseIn;
document.body.appendChild(menu0);
for(var i=1;i<=n;i++) {
if(i%2!=0) {
var temp="";
temp+="menu"+i+"=document.createElement('div');";
temp+="menu"+i+".id='"+iId+i+"';";
temp+="menu"+i+".style.position='absolute';";
temp+="menu"+i+".style.top=parseInt(menu"+(i-1)+".style.top)+parseInt(menu0.style.height);";
temp+="menu"+i+".style.left="+(iLeft-100)+";";
temp+="menu"+i+".style.width="+iWidth+";";
temp+="menu"+i+".style.height="+iHeight+";";
temp+="menu"+i+".style.border='1px solid red';";
temp+="menu"+i+".style.backgroundColor='skyblue';";
temp+="menu"+i+".style.filter='alpha(opacity=0)';";
temp+="menu"+i+".innerHTML=item["+(i-1)+"];";
eval(temp);
}
else {
temp="";
temp+="menu"+i+"=document.createElement('div');";
temp+="menu"+i+".id='"+iId+i+"';";
temp+="menu"+i+".style.position='absolute';";
temp+="menu"+i+".style.top=parseInt(menu"+(i-1)+".style.top)+parseInt(menu0.style.height);";
temp+="menu"+i+".style.left="+(iLeft+100)+";";
temp+="menu"+i+".style.width="+iWidth+";";
temp+="menu"+i+".style.height="+iHeight+";";
temp+="menu"+i+".style.border='1px solid red';";
temp+="menu"+i+".style.backgroundColor='skyblue';";
temp+="menu"+i+".style.filter='alpha(opacity=0)';";
temp+="menu"+i+".innerHTML=item["+(i-1)+"];";
eval(temp);
}
eval("document.body.appendChild(menu"+i+")");
}
}
var iLeftLine=50;
function fnMouseIn() {
if(iLeftLine<150) {
for(var i=1;i<=6;i++) {
if(i%2!=0) {
var sHtml="";
sHtml+="menu"+i+".style.pixelLeft+=10;";
sHtml+="menu"+i+".filters.alpha.opacity+=10;";
eval(sHtml);
}
else {
sHtml="";
sHtml+="menu"+i+".style.pixelLeft-=10;";
sHtml+="menu"+i+".filters.alpha.opacity+=10;";
eval(sHtml);
}
}
iLeftLine+=10;
}
else {
clearTimeout(iTimerID);
return;
}
iTimerID=setTimeout("fnMouseIn()",3);
}
create("create",20,150,57,22,6);

</script>  回复  更多评论
  
# re: menu
2006-12-16 11:15 | 汪杰
可以这样设置opacity：
obj.style.filter='alpha(opacity=50)';
或者
obj.filters.alpha.opacity=50;(此时必须已设置filter否者出错)  回复  更多评论
  
只有注册用户登录后才能发表评论。

<2024年4月>
日一二三四五六
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 457967
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜

Copyright ©2024 汪杰 Powered By博客园 模板提供：沪江博客