可拖动拉伸的左右分栏效果_层和布局特效

可拖动拉伸的左右分栏效果，你使用Frame框架的样子，但是本例子完全是用Table以及JS来实现的，左右分栏可改变，拖动中间的边框就可实现宽度的调整，点击时可设置为隐藏左侧列表。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" mrc="CoLee" />
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>Js可拖动拉伸的左右分栏效果</title>
<script   language="javascript">     
  var   isResizing=false;   
  function   Resize_mousedown(event,obj){   
  obj.mouseDownX=event.clientX;   
  obj.leftTdW=obj.previousSibling.offsetWidth;   
  obj.setCapture();   
  isResizing=true;   
  }   
  function   Resize_mousemove(event,obj){   
  if(!isResizing)   return   ;   
          var   newWidth=obj.leftTdW*1+event.clientX*1-obj.mouseDownX;   
          if(newWidth>0)   obj.previousSibling.style.width   =   newWidth+'px';   
          else   obj.previousSibling.style.width=1+'px';   
  }   
  function   Resize_mouseup(event,obj){   
  if(!isResizing)   return;   
  obj.releaseCapture();   
  isResizing=false;   
  }   
  function   Resize_setDefault(event,obj){   
  if(obj.innerText=="<")   {   
  obj.parentNode.previousSibling.style.width=1+'px';   
  obj.innerText=">";   
  }   
  else{   
  obj.parentNode.previousSibling.style.width=150+'px';   
  obj.innerText="<";   
  }   
  event.cancelBubble=true;   
  }   
  </script>
<style>
html, body {
 margin:0;
 padding:0;
 height:100%;
}
</style>
</head>
<body>
用JS模拟出的左右分栏效果<hr />
<table   style="width:100%;height:100%;"  border=0  cellspacing=0 cellpadding=0px   >
  <tr>
    <td   style="width:150px;">左边的内容：<br />欢迎访问<br/><a href="http://www.mb5u.com">模板无忧</a></td>
    <td   style="width:3px;cursor:e-resize;background-color:#cccccc;"   align="center"   valign="middle"   
            onmousedown="Resize_mousedown(event,this);"   onmouseup="Resize_mouseup(event,this);"   onmousemove="Resize_mousemove(event,this);"><font   style="size:3px;background-color:#eeeeee;cursor:pointer;"   onmousedown="Resize_setDefault(event,this);"><</font></td>
    <td>右边频道列表：
<br/>
<a href="/">网页特效</a><br/>
<a href="/">电子书籍</a><br/>
<a href="/">源码下载</a><br/>
</td>
  </tr>
</table>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-10-30

[收藏][报错][返回列表]

可拖动拉伸的左右分栏效果_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些