• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
用心去对待
瞄准目标,勇往直前
博客园    首页    新随笔    联系   管理    订阅  订阅
可以拖动,关闭的DIV组合

 

Code
 1 <html>
 2 <head>
 3 <title>测试可动div</title>
 4 <script language='javascript' type='text/javascript'>
 5 var offset_x;
 6 var offset_y;
 7 function Milan_StartMove(oEvent,div_id)
 8 {
 9     var whichButton;
10     if(document.all&&oEvent.button==1) whichButton=true;
11     else { if(oEvent.button==0)whichButton=true;}
12     if(whichButton)
13     { 
14         var oDiv=div_id;
15         offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft);
16         offset_y=parseInt(oEvent.clientY-oDiv.offsetTop);
17         document.documentElement.onmousemove=function(mEvent)
18         {    
19             var eEvent;
20             if(document.all) eEvent=event;
21             else{eEvent=mEvent;}
22             var oDiv=div_id;
23             var x=eEvent.clientX-offset_x;
24             var y=eEvent.clientY-offset_y; 
25             oDiv.style.left=(x)+"px";
26             oDiv.style.top=(y)+"px";
27            
28         }
29     }
30 }
31 function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; }
32 function div_Close(o)
33 {
34  var oDiv=o; 
35  oDiv.style.display="none";
36 }
37 
38 </script>
39 </head>
40 <body>
41 <div id="oDiv1" style="position:absolute;width:200px;height:120px;border:1px solid silver;left:100px;top:100px;z-index:9999;">
42  <div id="move1" onmousedown="Milan_StartMove(event,this.parentNode)" onmouseup="Milan_StopMove(event)" 
43 style="cursor:move;width:100%;height:30px;background-color:#0066cc; font-size:10px;">
44   <div onclick="div_Close(this.parentNode.parentNode)" style="float:right; width:20px; height:100%; cursor:hand;   background-color:#cc3333; color:White;font-size:25px;">X
45   </div>
46  </div>
47  <span>测试1</span>
48 </div>
49 
50 <div id="oDiv2" style="position:absolute;width:200px;height:120px;border:1px solid silver;left:100px;top:250px;z-index:9999;">
51  <div id="move2" onmousedown="Milan_StartMove(event,this.parentNode)" onmouseup="Milan_StopMove(event)" 
52 style="cursor:move;width:100%;height:30px;background-color:#ffbeff; font-size:10px;">
53 <div onclick="div_Close(this.parentNode.parentNode)" style="float:right; width:20px; height:100%; cursor:hand;   background-color:#cc3333; color:White;font-size:25px;">X
54   </div>
55   拖动我,嘿嘿
56  </div>
57  <span>测试2</span>
58 </div>
59 </body>
60 </html>
61 
红色背景的X为关闭按钮
posted on 2008-11-26 11:37  niuyy  阅读(960)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3