可任意拖动的导航条

最新推荐文章于 2022-04-12 12:59:19 发布

webkkk

最新推荐文章于 2022-04-12 12:59:19 发布

阅读量1.3k

点赞数

分类专栏：开发语言文章标签： div function class html 音乐 up

本文链接：https://blog.csdn.net/webkkk/article/details/1947046

版权

开发语言专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<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.οnmοusemοve=D_NewMouseMove;
document.οnmοuseup=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 οnmοusedοwn='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 οnmοusedοwn='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>

webkkk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可任意拖动的导航条

可任意拖动的导航条var Mouse_Obj="none";var pXvar pYdocument.onmousemove=D_NewMouseMove;document.onmouseup=D_NewMouseUp;function m(c_Obj){ Mouse_Obj=c_Obj; pX=parseInt(document.all(Mouse_Obj).style.left)-even
复制链接

扫一扫

专栏目录