***页面导航***可拖动的菜单
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件要完成此效果需要两个步骤
第一步：把如下代码加入到<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=''
timerlinearray='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()">
--------------------------------------
http://ww w.huoyue.com.cn 活跃 网，活跃 人群的论坛，访问活跃 网，将给您带来意想不到的收获，还 可以免费 为您开论坛，让您免费拥有与 朋友、网友交流的论坛。 你 是年轻人吗？你活跃你就 上！
页:
[1]