可拖動(dòng)拉伸的左右分欄效果_層和布局特效

可拖動(dòng)拉伸的左右分欄效果，你使用Frame框架的樣子，但是本例子完全是用Table以及JS來實(shí)現(xiàn)的，左右分欄可改變，拖動(dòng)中間的邊框就可實(shí)現(xiàn)寬度的調(diào)整，點(diǎn)擊時(shí)可設(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可拖動(dòng)拉伸的左右分欄效果</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.hl5o.cn">模板無憂</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>

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

[收藏][報(bào)錯(cuò)][返回列表]

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

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

層和布局特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索可拖動(dòng)拉伸的左右分欄效果
特效說明：
層和布局模板-可拖動(dòng)拉伸的左右分欄效果。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

可拖動(dòng)拉伸的左右分欄效果_層和布局特效

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

層和布局特效推薦

猜你也喜歡看這些