javascript + DIV +CSS 实现可拖动消息窗体

  
<html>
<head>
<style>
    #div
{width:300px;height:200px;color=red;border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;size=13px;position:absolute;bottom:50px;right=80px;}
    
</style>
</head>

<body>
    
<script language="javascript">
        
var moveable = false;
        
function aa(val)
        
{                        
             
var obj = document.getElementById("div");
            
if(val == 0)
            
{
                obj.style.display
="";
                        
var x,y;
            
                x 
= event.clientX;
                y 
= event.clientY;
           
                obj.style.left
=x;
                obj.style.top
=y;
                        
//alert("X:"+x+"Y:"+y);
            }

                    
else
              obj.style.display
="none";
        }
    
        
function startgrap(obj)
        
{                        
            
if(event.button==1)
            
{
            obj.setCapture();
             
//记录鼠标和层位置;
                       x0 = event.clientX;
                       y0 
= event.clientY;
                       x1 
= parseInt(obj.style.left);
                       y1 
= parseInt(obj.style.top);
                       moveable 
= true;            
            }

         }

        
function stopgrap(obj)
        
{
            
if(moveable)
            
{
                obj.releaseCapture();
//用来释放对鼠标的捕捉
                moveable = false;
            }

        }

        
function grap(obj)
        
{
             
if(moveable)
                  
{                       
                           obj.style.left 
= x1 + event.clientX - x0;
                           obj.style.top  
= y1 + event.clientY - y0;
            }

        }

    
</script>
    
<form id="form1">
        
<input type=button value="DIV应用" onmousemove="aa(0);">    
        
<div id="div2" style="background:#ff00cc;width=100px;" onmousemove="aa(0);">鼠标移到上面试试看</div> 
        
<div id="div" style="display:none" onmousedown="startgrap(this);" onmouseup="stopgrap(this);" onmousemove="grap(this);">
            
<div style="border-top:1px solid red;position:absolute;right=1px;"><span onclick="aa(1);" style="cursor:hand"><font color="#eee"><b>关闭</b></font></span></div>
            
<span>I Like you ,do you know? <br>if you don`t know,now i tell you,i tell you!<br><br>透明窗体,可拖动</span>
        
</div>
    
</form>
    
</body>
</html>

本程序测试通过,大家有好的方法可一起讨论!谢谢

posted @ 2006-07-14 18:42  Ricebug  阅读(2819)  评论(2编辑  收藏  举报