網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>層和布局特效代碼>

可拖動拉伸的左右分欄效果_層和布局特效

可拖動拉伸的左右分欄效果，你使用Frame框架的樣子，但是本例子完全是用Table以及JS來實現(xiàn)的，左右分欄可改變，拖動中間的邊框就可實現(xiàn)寬度的調(diào)整，點擊時可設(shè)置為隱藏左側(cè)列表。

<!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;">左邊的內(nèi)容：<br />歡迎訪問<br/><a href="http://www.ghpqjb.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="/">網(wǎng)頁特效</a><br/>
<a href="/">電子書籍</a><br/>
<a href="/">源碼下載</a><br/>
</td>
  </tr>
</table>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-10-30

[收藏][報錯][返回列表]

相關(guān)層和布局特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

可拖動拉伸的左右分欄效果_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些