<html> <head> <mce: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; CURSOR: hand; } --></mce:style><style mce_bogus="1"> #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; CURSOR: hand; } </style> </head> <body> <mce: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; } } // --></mce:script> <form id="form1"> <input type=button value="DIV应用" οnmοusemοve="aa(0);"> <div id="div2" style="background:green;width=50px;" οnmοusemοve="aa(0);">鼠标移到上面试试看</div> <div id="div" style="display:none; left: 0px; bottom: 50px;" οnmοusedοwn="startgrap(this);" οnmοuseup="stopgrap(this);" οnmοusemοve="grap(this);"> <div style="border-top:1px solid red;position:absolute;right=1px;"><span οnclick="aa(1);" style="cursor:hand" mce_style="cursor:hand"><font color="#eee"><b>关闭</b></font></span></div> 好久没有你的信好久没有人陪我谈心怀念你柔情似水的眼睛那是我天空最美丽的星星异乡的午夜特别冷清一个男人和一颗热切的信不知道远方的你是否能感应-----RevengeBoy <br /> <span><br> 透明窗体,可拖动</span> <br /> Test!!!</div> </form> </body> </html>