以下代码演示如何使用JS实现浮动框效果。不过太简单了,大家可不要砸鸡蛋哦~
<!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>