本文通过分析126邮箱菜单的实现方式，详细介绍了使用HTML、CSS和JavaScript创建可拖动菜单的方法。该菜单具备动画效果，包括菜单项的渐显渐隐及位置平滑变化。
<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>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
