<HTML>
<HEAD>
<TITLE> Drag_126_like </TITLE>
</HEAD>
<BODY>
<style>
body,td,a {font-size:9pt;color:black}
.none{border:black 1px solid;background:D9D9D9;padding-top:2}
.over {border:black 1px solid;background:707888;color:white;padding-top:2}
</style>
<!--css:
加載css樣式的方式：
?????head內引用 <style type = "text/css"></stylt>
?????body內引用 <div style = "">...</div>
?????文件外引用(Head內) <link rel = stylesheet href = "mystyle.css" type = "text/css">
?????????? <style type = "text/css"> @import url(mystyle.css); </style>
?
css與標記對應的方式：
?????標記選擇符 如： body,td,a {font-size:9pt;color:black}
?????類選擇符 在html標記中使用class= "classname"，然后在style標記內用".classname",如?
???????????.none{border:black 1px solid;background:D9D9D9;padding-top:2}
?????ID選擇符 html內用"ID = SZG", style 內用#SZG
-->
<body onmousemove="move()">
<div style="position:absolute; left: 100; top: 100; width: 1; height: 1;cursor: hand" ID=plane onmousedown="down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top)"onmouseup="down=false">
<div align=center style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:1;color:white;background:707888;
cursor:move"onmouseover='stopTimerline();menuItemIn()' onmouseout='runTimerline()'class="none">
可拖動的菜單</div>
<div align=center id="item11" style="position:absolute; left:50px; top:55px; width:99px; height:19px;
z-index:2; filter:alpha(opacity=0)"class="none" onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()" >菜單項一</div>
<!--這里還要設置鼠標如果離開可拖動菜單，over item11等時，必須stopTimerline()
?this.className='over'設置<div class = "over"
-->
<div align=center id="item12" style="position:absolute; left:250px; top:77px; width:99px; height:19px; z-index:3;filter:alpha(opacity=0)"class=none onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()">菜單項二</div>?
<div align=center id="item13" style="position:absolute; left:50px; top:99px; width:99px; height:19px;
z-index:4; filter:alpha(opacity=0)"class=none onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()">菜單項三</div>
<div align=center id="item14" style="position:absolute; left:250px; top:121px; width:99px; height:19px; z-index:5;filter:alpha(opacity=0)"class=none onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()">菜單項四</div>
<div align=center id="item15" style="position:absolute; left:50px; top:143px; width:99px; height:19px;
z-index:6; filter:alpha(opacity=0)"class=none onmouseover="this.className='over';stopTimerline()"
onmouseout="this.className='none';runTimerline()">菜單項五</div>
</div>
<script>
//動畫菜單
/*javascript
?解釋型語言，瀏覽器邊解釋邊執行
?定義變量時候只有一個關鍵字var?
??javascript的變量是弱變量，不經過聲明就可以使用，建議先用var聲明==>java是強變量語言
??javascript語句后面可以加分號，也可以不加。建議加
?javascript的事件：超級連接事件，瀏覽器事件，界面事件（click, mouseout,mouseover,mousedown）
??如onmouseover="this.className='over';stopTimerline()"
*/
var currTimerlinePoint=0
var totalTimerlineFrames=2
var timerlineTimer
var leftLine = 50
var timerIn
var timerOut
var timerlineArray = new Array()
timerlineArray[0]=''
timerlineArray[1]='menuItemOut()'
/*setTimeout & clearTimeout
?在Javascript給事件定時。利用setTimeout(), 指令可以在未來的某個指定時間執行特定指令。
?如果你改變主意，你可以用clearTimeout()取消setTimeout的定時.
*/
function runTimerline(){?//onmouseout
?window.timerlineTimer = setTimeout('menuItemOut()',500)
//這里的時間不能太短，否則用戶item，進入item11等菜單時就menuItemOut了
}
function stopTimerline(){?//onmouserover
?clearTimeout(window.timerlineTimer)
}
function menuItemIn(){??//onmouseover
/*
?html.div中用了個技巧，將item11放在left處，再設置filters.alpha.opacity=0，如此用戶就看不見，
鼠標移上去時，組件出現，從遠處來的效果
*/
?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
??leftLine += 20
?}
?else{
??clearTimeout(window.timerIn)
??return false
?}
?timerIn=window.setTimeout('menuItemIn()',1)
//利用setTimeout來不斷重復執行menuItemIn，否則只執行一次。直到leftLine＝150===>用循環來做？
/*
傻的用循環試圖解決，第一種執行的太快，看不出循序漸進；第二種太慢.....
do{
?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
?leftLine += 20
}while(leftLine!=150)
for (i = 0;i<10,leftLine!=150 ;i++){
?if(i==2||i==4||i==6||i==8){
?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
?leftLine += 20
?}
}
*/
}
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
??leftLine -= 20
?}
?else{
??clearTimeout(window.timerOut)
??return false;
?}
?timerOut=window.setTimeout("menuItemOut()",1)
}
//移動層==============>不懂...
var over=false,down=false,divleft,divtop;
function move(){
?if(down){
??plane.style.left=event.clientX-divleft;
??plane.style.top=event.clientY-divtop;
?}
}
</script>
</BODY>
</HTML>