Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 75144
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
鼠标可以拖动的嵌套表格（JavaScript）

分类： Html/Css

2014-07-30 11:01:07

  • 一款JavaScript代码，实现的效果是使被嵌套的表格可以在外层表格中拖动，而不能超出外表格的边框，类似层的拖动效果。


点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title></title>
  5. </head>
  6. <body>
  7. <script>
  8. var isDraging=false;var ox,oy;function fnDown()
  9. {
  10. isDraging=true;
  11. ox=event.offsetX;
  12. oy=event.offsetY;
  13. mid.setCapture();}
  14. function fnMove()
  15. {if(event.button!=1)
  16. fnRelease();
  17. if(isDraging){
  18. var th=event.y-oTable.offsetTop-oy;
  19. if (th<1) th=1;
  20. if(th+parseInt(mid.height)>parseInt(oTable.height))
  21. th=parseInt(oTable.height)-parseInt(mid.height);
  22. up.height=th;
  23.  }
  24.  }
  25.  function fnUp(){fnRelease();
  26.  }
  27.  function
  28.  fnRelease()
  29.  {
  30.  isDraging=false;
  31.  mid.releaseCapture();}</script>
  32.  <BODY>
  33.  <TABLE id=oTable width=360 height=312 border=1 cellspacing="0" cellpadding="0" >
  34.  <TR>
  35.  <TD id=up bgColor=#0066CC></TD></TR>
  36.  <TR>
  37.  <TD id=mid height=38 bgColor=#000000 onmousedown="fnDown()" onmousemove="fnMove()" onmouseup="fnUp"></TD>
  38.  </TR>
  39.  <TR>
  40.  <TD id=down bgColor=#0066CC></TD></TR>
  41.  </TABLE>
  42. </body>
  43. </html>


阅读(493) | 评论(0) | 转发(0) |
0

上一篇：让LI列表每隔一行换一种背景色的实现代码

下一篇：燃烧文字，JS文字特效

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6