可任意拖动的导航条

来源：互联网发布：适合儿童编程的网站编辑：程序博客网时间：2024/06/06 01:42

<html>
<head>
<title>可任意拖动的导航条</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<head>
<SCRIPT>
var Mouse_Obj="none";
var pX
var pY
document.onmousemove=D_NewMouseMove;
document.onmouseup=D_NewMouseUp;

function m(c_Obj){
Mouse_Obj=c_Obj;
pX=parseInt(document.all(Mouse_Obj).style.left)-event.x;
pY=parseInt(document.all(Mouse_Obj).style.top)-event.y;
}

function D_NewMouseMove(){
if(Mouse_Obj!="none"){
  document.all(Mouse_Obj).style.left=pX+event.x;
  document.all(Mouse_Obj).style.top=pY+event.y;
  event.returnValue=false;
}
}

function D_NewMouseUp(){
if(Mouse_Obj!="none"){
Mouse_Obj="none";
}
}
</SCRIPT>

<STYLE>
.up {
BORDER-RIGHT: #711200 1px solid;
PADDING-RIGHT: 1px;
BORDER-TOP: white 1px solid;
PADDING-LEFT: 1px;
FONT-SIZE: 9pt;
PADDING-BOTTOM: 1px;
BORDER-LEFT: white 1px solid;
COLOR: #ff0000;
PADDING-TOP: 1px;
BORDER-BOTTOM: #711200 1px solid;
FONT-FAMILY: Tahoma;
BACKGROUND-COLOR: #eadfd0
}

.down {
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #711200 1px solid;
FONT-SIZE: 9pt;
BORDER-LEFT: #711200 1px solid;
CURSOR: hand;
COLOR: #ffffff;
BORDER-BOTTOM: #ffffff 1px solid;
FONT-FAMILY: Tahoma;
BACKGROUND-COLOR: #336699
}

A:link {
COLOR: #711200;
TEXT-DECORATION: none
}

A:visited {
COLOR: #711200;
TEXT-DECORATION: none
}

A:hover {
COLOR: blue;
TEXT-DECORATION: underline
}
</STYLE>
</head>
<body>
<DIV class=up id=test1
style="; LEFT: expression((document.body.clientWidth-60)/2); WIDTH: 100px; POSITION: absolute; ; TOP: expression((document.body.clientHeight-120)/2); HEIGHT: 60px">
<DIV class=down onmousedown='m("test1")'>绝对领域DIV导航</DIV>
<DIV style="PADDING-LEFT: 10pt"><a href="http://www.webkkk.net/music/">→音乐空间←</a></DIV>
<DIV style="PADDING-LEFT: 10pt"><a href="http://www.webkkk.net/guestbook/">→→留言←←</a></DIV>
<DIV style="PADDING-LEFT: 10pt">DIV TEST！</DIV>
</DIV>

<DIV class=up id=test2
style="; LEFT: expression((document.body.clientWidth-200)/2); WIDTH: 100px; POSITION: absolute; ; TOP: expression((document.body.clientHeight-200)/2); HEIGHT: 60px">
<DIV class=down onmousedown='m("test2")'>绝对领域DIV导航</DIV>
<DIV style="PADDING-LEFT: 10pt"><a href="http://www.webkkk.net/">绝对领域首页</a></DIV>
<DIV style="PADDING-LEFT: 10pt"><a href="http://www.webkkk.net/bbs/">→→论坛←←</a></DIV>
<DIV style="PADDING-LEFT: 10pt"><a href="http://www.webkkk.net/blog/">→→博客←←</a></DIV>
</DIV>
</body>
</html>