可以拖动的显隐导航菜单

网页特效代码

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

热点推荐儿歌大全童谣
生意网址大全美容
我们是致力收藏最实用的网页特效代码！

您的位置: 网页特效 -> 菜单导航 -> 可以拖动的显隐导航菜单

可以拖动的显隐导航菜单

作者:可以拖动的显隐导航菜单发布时间:2007-12-12 15:15:16 发布人: admin

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>中国建站之家网页特效演示，可以拖动的显隐导航菜单</title>
<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>
</head>

<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)" onmouseover="this.className='over';stopTimerline()" onmouseout="this.className='none';runTimerline()" class="none">菜单项一</div>
<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>
//动画菜单
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)
}
//移动层
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>
<a href="http://web.archive.org/web/20080221155413/http://myjs.jz123.cn/">欢迎访问中国建站之家网页特效集</a>

可以拖动的显隐导航菜单

将本文收藏到QQ书签与更多好友分享

上一篇：文章：文件夹式的菜单下一篇：文章：XP菜单网页特效

网页特效代码

可以拖动的显隐导航菜单

本类浏览排行 »

本站推荐文章 »