以下代碼演示如何使用JS實(shí)現(xiàn)浮動框效果。不過太簡單了，大家可不要砸雞蛋哦～
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">
<title>Insert?title?here</title>
????<style?type="text/css">
????????.Parent?{
????????????position:absolute;
????????????height:150px;?width:200px;
????????????top:0px;?left:0px;
????????????border:1px?solid?#123456;
????????????BACKGROUND-COLOR:?#bbbbbb
????????}
????????.Header?{
????????????margin:2px;
??????????????padding:2px;
??????????????width:194px;
?????????????color:white;
?????????????background-color:navy;
?????????????font-family:宋體;
??????????????font-size:12px;
????????}
????????.Content?{
????????????color:black;
????????????font-family:宋體;
????????????font-size:12px;
????????}
????</style>??
????<script?type="text/javascript">
????????var?dx?=?0;
????????var?dy?=?0;
????????var?x?=?0;
????????var?y?=?0;
????????var?isMouseDown?=?false;
????????var?idNumPre?=?-1;
????????var?root;
????????
????????function?mouseMove(idNum)?{
????????????if?(isMouseDown)?{
????????????????if?(idNumPre?!=?idNum)?{
????????????????????root?=?document.getElementById("Parent"?+?idNum);
????????????????????idNumPre?=?idNum;
????????????????}
????????????????root.style.top?=?event.clientY?-?dy?+?"px";????
????????????????root.style.left?=?event.clientX?-?dx?+?"px";
????????????????y?=?event.clientY?-?dy;
????????????????x?=?event.clientX?-?dx;
????????????}
????????}
????????
????????function?mouseDown(idNum)?{
????????????dx?=?event.clientX?-?x;
????????????dy?=?event.clientY?-?y;
????????????isMouseDown?=?true;
????????}
????????
????????function?mouseUp(idNum)?{
????????????isMouseDown?=?false;
????????}
????
????????function?mouseOut(idNum)?{
????????????isMouseDown?=?false;
????????}
????</script>
</head>
<body>
<div?id?=?"Parent1"?class='Parent'>
????<div?id?=?"header1"?class="Header"?onmouseup="mouseUp('1');"
? ? ? ? onmousemove="mouseMove('1');" onmousedown="mouseDown('1');"
? ? ? ? onmouseOut="mouseOut('1');">浮動框示例
???? </div>
????<div?id?=?"content1"?class="Content">release2006@163.com</div>
</div>
</body>
</html>