DotNet编程者

DotNet编程者
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

拖动菜单，特别的地方是下级菜单的闪现方式很特别，有些flash的感觉

Posted on 2006-10-16 12:39  张志杰  阅读(243)  评论(1)    收藏  举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0051)http://www.hot4.org/java/dynamic/dragmenu3/demo.htm -->
<HTML><HEAD><TITLE>javascriptboy</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
    FONT-SIZE: 9pt; COLOR: black
}
TD {
    FONT-SIZE: 9pt; COLOR: black
}
A {
    FONT-SIZE: 9pt; COLOR: black
}
.none {
    BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BACKGROUND: #d9d9d9; BORDER-LEFT: black 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid
}
.over {
    BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BACKGROUND: #707888; BORDER-LEFT: black 1px solid; COLOR: white; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid
}
</STYLE>

<SCRIPT language=JavaScript>
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</SCRIPT>

<META content="MSHTML 5.50.4522.1800" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff>
<DIV onmouseup=down=false 
onmousedown=down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top) 
id=plane style="LEFT: -50px; CURSOR: hand; POSITION: absolute; TOP: 10px">
<DIV class=none onmouseover=menuin();init() 
style="Z-INDEX: 1; BACKGROUND: #707888; LEFT: 150px; WIDTH: 100px; CURSOR: hand; COLOR: white; POSITION: absolute; TOP: 33px; HEIGHT: 19px" 
onmouseout=menuout() align=center>可拖动的菜单</DIV>
<DIV class=none id=item1 onmouseover="this.className='over';menuin()" 
style="Z-INDEX: 2; FILTER: alpha(opacity=0); LEFT: 50px; WIDTH: 99px; POSITION: absolute; TOP: 55px; HEIGHT: 19px" 
onmouseout="this.className='none';menuout()" align=center>第一个</DIV>
<DIV class=none id=item2 onmouseover="this.className='over';menuin()" 
style="Z-INDEX: 3; FILTER: alpha(opacity=0); LEFT: 250px; WIDTH: 99px; POSITION: absolute; TOP: 77px; HEIGHT: 19px" 
onmouseout="this.className='none';menuout()" align=center>菜单项二</DIV>
<DIV class=none id=item3 onmouseover="this.className='over';menuin()" 
style="Z-INDEX: 4; FILTER: alpha(opacity=0); LEFT: 50px; WIDTH: 99px; POSITION: absolute; TOP: 99px; HEIGHT: 19px" 
onmouseout="this.className='none';menuout()" align=center>菜单项三</DIV>
<DIV class=none id=item4 onmouseover="this.className='over';menuin()" 
style="Z-INDEX: 5; FILTER: alpha(opacity=0); LEFT: 250px; WIDTH: 99px; POSITION: absolute; TOP: 121px; HEIGHT: 19px" 
onmouseout="this.className='none';menuout()" align=center>菜单项四</DIV>
<DIV class=none id=item5 onmouseover="this.className='over';menuin()" 
style="Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; WIDTH: 99px; POSITION: absolute; TOP: 143px; HEIGHT: 19px" 
onmouseout="this.className='none';menuout()" align=center>菜单项五</DIV></DIV>
<DIV id=Layer1 
style="Z-INDEX: 1; LEFT: -500px; WIDTH: 445px; POSITION: absolute; TOP: -500px; HEIGHT: 53px">divleft: 
<INPUT id=lt name=Input> divtop: <INPUT id=tp name=Input2> <BR>clientx: <INPUT 
id=tx name=Input2> clienty: <INPUT id=ty name=Input2> </DIV>
<SCRIPT language=vbs>
dim down,divleft,divtop,timelinestart,timelinestop,tidone,tidtwo,tidtree
down=false
timelinestart=0
timelinestop=0
sub document_onmousemove
if down then
plane.style.left=window.event.clientx-divleft
plane.style.top=window.event.clienty-divtop
end if
lt.value=divleft
tp.value=divtop
tx.value=window.event.clientx
ty.value=window.event.clienty
end sub
sub document_ondargstart
window.event.returnvalue=false
end sub
function menuin()
cleartimeout(tidtree)
end function
function menuout()
tidtree=settimeout("outit()",200)
end function
function init()
if timelinestart<>5 then
cleartimeout(tidtwo)
item1.style.pixelLeft=item1.style.pixelLeft+20
item1.filters.alpha.opacity=item1.filters.alpha.opacity+20
item2.style.pixelLeft=item2.style.pixelLeft-20
item2.filters.alpha.opacity=item2.filters.alpha.opacity+20
item3.style.pixelLeft=item3.style.pixelLeft+20
item3.filters.alpha.opacity=item3.filters.alpha.opacity+20
item4.style.pixelLeft=item4.style.pixelLeft-20
item4.filters.alpha.opacity=item4.filters.alpha.opacity+20
item5.style.pixelLeft=item5.style.pixelLeft+20
item5.filters.alpha.opacity=item5.filters.alpha.opacity+20
timelinestart=timelinestart+1
else
cleartimeout(tidone)
end if
tidone=settimeout("init()",1)
end function
function outit()
if timelinestart<>0 then
cleartimeout(tidone)
item1.style.pixelLeft=item1.style.pixelLeft-20
item1.filters.alpha.opacity=item1.filters.alpha.opacity-20
item2.style.pixelLeft=item2.style.pixelLeft+20
item2.filters.alpha.opacity=item2.filters.alpha.opacity-20
item3.style.pixelLeft=item3.style.pixelLeft-20
item3.filters.alpha.opacity=item3.filters.alpha.opacity-20
item4.style.pixelLeft=item4.style.pixelLeft+20
item4.filters.alpha.opacity=item4.filters.alpha.opacity-20
item5.style.pixelLeft=item5.style.pixelLeft-20
item5.filters.alpha.opacity=item5.filters.alpha.opacity-20
timelinestart=timelinestart-1
else
cleartimeout(tidtwo)
end if
tidtwo=settimeout("outit()",1)
end function
</SCRIPT>
</BODY></HTML>