可拖动的菜单COOL菜单

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

有什么问题请到<a href='/bbs/forums.php?fid=21'>论坛</a>中发表<br>

<!-- http://www.webjx.com -->

<!-- bbs http://www.webjx.com/bbs-->

<!--要完成此效果需要两个步骤

第一步:把如下代码加入到<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"

>菜单项一</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()">菜单项二</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()">菜单项三</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()">菜单项四</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()">菜单项五</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()">

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航