<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內(nèi)引用 <style type = "text/css"></stylt>
?????body內(nèi)引用 <div style = "">...</div>
?????文件外引用(Head內(nèi)) <link rel = stylesheet href = "mystyle.css" type = "text/css">
?????????? <style type = "text/css"> @import url(mystyle.css); </style>
?
css與標(biāo)記對(duì)應(yīng)的方式：
?????標(biāo)記選擇符 如： body,td,a {font-size:9pt;color:black}
?????類選擇符 在html標(biāo)記中使用class= "classname"，然后在style標(biāo)記內(nèi)用".classname",如?
???????????.none{border:black 1px solid;background:D9D9D9;padding-top:2}
?????ID選擇符 html內(nèi)用"ID = SZG", style 內(nèi)用#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">
可拖動(dòng)的菜單</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()" >菜單項(xiàng)一</div>
<!--這里還要設(shè)置鼠標(biāo)如果離開可拖動(dòng)菜單，over item11等時(shí)，必須stopTimerline()
?this.className='over'設(shè)置<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()">菜單項(xiàng)二</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()">菜單項(xiàng)三</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()">菜單項(xiàng)四</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()">菜單項(xiàng)五</div>
</div>
<script>
//動(dòng)畫菜單
/*javascript
?解釋型語言，瀏覽器邊解釋邊執(zhí)行
?定義變量時(shí)候只有一個(gè)關(guān)鍵字var?
??javascript的變量是弱變量，不經(jīng)過聲明就可以使用，建議先用var聲明==>java是強(qiáng)變量語言
??javascript語句后面可以加分號(hào)，也可以不加。建議加
?javascript的事件：超級(jí)連接事件，瀏覽器事件，界面事件（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給事件定時(shí)。利用setTimeout(), 指令可以在未來的某個(gè)指定時(shí)間執(zhí)行特定指令。
?如果你改變主意，你可以用clearTimeout()取消setTimeout的定時(shí).
*/
function runTimerline(){?//onmouseout
?window.timerlineTimer = setTimeout('menuItemOut()',500)
//這里的時(shí)間不能太短，否則用戶item，進(jìn)入item11等菜單時(shí)就menuItemOut了
}
function stopTimerline(){?//onmouserover
?clearTimeout(window.timerlineTimer)
}
function menuItemIn(){??//onmouseover
/*
?html.div中用了個(gè)技巧，將item11放在left處，再設(shè)置filters.alpha.opacity=0，如此用戶就看不見，
鼠標(biāo)移上去時(shí)，組件出現(xiàn)，從遠(yuǎn)處來的效果
*/
?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來不斷重復(fù)執(zhí)行menuItemIn，否則只執(zhí)行一次。直到leftLine＝150===>用循環(huán)來做？
/*
傻的用循環(huán)試圖解決，第一種執(zhí)行的太快，看不出循序漸進(jìn)；第二種太慢.....
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)
}
//移動(dòng)層==============>不懂...
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>