HTML代码如下:
<html>
<head>
<SCRIPT>
var divObj=null;
var pX;
var pY;
document.onmousemove = divMove;
document.onmouseup = divUp;
function moveObj(obj){
divObj=document.all(obj);
pX = divObj.style.pixelLeft-event.x;
pY = divObj.style.pixelTop-event.y;
}
function divMove(){
if(divObj){
divObj.style.left = pX+event.x;
divObj.style.top = pY+event.y;
event.returnValue = false;
}
}
function divUp(){
if(divObj){
divObj=null;
}
}
</SCRIPT>
<STYLE>
.divLayer {
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;
LEFT: expression(( document . body . clientWidth-80)/ 2 );
WIDTH: 100px;
POSITION: absolute;;
TOP: expression(( document . body . clientHeight-120)/ 2 );
HEIGHT: 120px
}
.title {
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
}
</STYLE>
<title>Moving DIV</title>
</head>
<body>
<DIV class="divLayer" id="div1" οnmοusedοwn="moveObj('div1')">
<DIV class="title">我的博客</DIV>
<DIV style="PADDING-LEFT: 5pt"><A href="http://hi.baidu.com/addward_li"target=_blank>我的博客</A></DIV>
</DIV>
</body>
</html>
创建可移动的悬浮DIV
最新推荐文章于 2021-06-03 10:50:44 发布