创建可移动的悬浮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>