说明: 可拖动的菜单
效果: 点这里看效果!
代码: 要完成此效果需要两个步骤
第一步:把如下代码加入到<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>
<div style="position:absolute; left: 100; top: 20;
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:220px;
top:3px; 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:120px; top:25px; width:99px; height:19px; z-index:2;
filter:alpha(opacity=0)" onMouseOver="this.className='over';stopTimerline()"
onMouseOut="this.className='none';runTimerline()"
class="none"
><a href="http://www.yy0736.com" target="_blank">菜单项一</a>
</div>
<div align=center id="item12" style="position:absolute;
left:320px; top:47px; width:99px; height:19px; z-index:3;filter:alpha(opacity=0)"
class=none onMouseOver="this.className='over';stopTimerline()"
onMouseOut="this.className='none';runTimerline()"><a
href="http://www.yy0736.com/js" target="_blank">菜单项二</a></div>
<div align=center id="item13" style="position:absolute;
left:120px; top:69px; width:99px; height:19px; z-index:4;
filter:alpha(opacity=0)"
class=none onMouseOver="this.className='over';stopTimerline()"
onMouseOut="this.className='none';runTimerline()"><a
href="http://www.yy0736.com/flash" target="_blank">菜单项三</a></div>
<div align=center id="item14" style="position:absolute;
left:320px; top:91px; width:99px; height:19px; z-index:5;filter:alpha(opacity=0)"
class=none onMouseOver="this.className='over';stopTimerline()"
onMouseOut="this.className='none';runTimerline()"><a
href="http://www.yy0736.com/webpage" target="_blank">菜单项四</a></div>
<div align=center id="item15" style="position:absolute;
left:120px; top:113px; width:99px; height:19px; z-index:6;
filter:alpha(opacity=0)"
class=none onMouseOver="this.className='over';stopTimerline()"
onMouseOut="this.className='none';runTimerline()"><a
href="http://www.yy0736.com/school" target="_blank">菜单项五</a></div>
</div>
<script>
//动画菜单
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()
{
window.timerlineTimer = setTimeout('menuItemOut()',500)
}
function stopTimerline()
{
clearTimeout(window.timerlineTimer)
}
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
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
leftLine -= 20
}
else
{
clearTimeout(window.timerOut)
return false;
}
timerOut=window.setTimeout("menuItemOut()",1)
}
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
//移动层
var over=false,down=false,divleft,divtop;function move(){
if(down){
plane.style.left=event.clientX-divleft;
plane.style.top=event.clientY-divtop}}
</script>
第二步:把“onmousemove="move()"”加在<body>标记里
例如:<body onmousemove="move()">
作者:佚名 来源: 网上转帖 |