创建可移动的悬浮DIV

来源:互联网 发布:已开通淘宝客淘宝达人 编辑:程序博客网 时间:2024/05/17 21:59

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" onmousedown="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>


原创粉丝点击