可拖动拉伸的左右分栏

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 综合实例 -> 可拖动拉伸的左右分栏

可拖动拉伸的左右分栏

作者:admin 发布时间:2009-10-19 22:49:37 发布人: admin

<!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" content="CoLee"/>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<meta name="keywords" content="中国建站"/>
<meta name="description" content="服务于广大Web开发爱好者的免费技术资源网站，提供最专业的网页制作教程，网站源码和模板下载，网页特效、站长资讯等建站资源；同时提供网站开发及技术支持服务。 记住我们的网址：www.jz123.cn，中国建站，有你更精彩！"/>
<title>可拖动拉伸的左右分栏效果，中国建站整理收集 </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>
告诉你一个应有尽有的网页特效网址：<a href="http://web.archive.org/web/20150530090042/http://myjs.jz123.cn/">http://myjs.jz123.cn</a>
<hr/>
<table style="width:100%;height:100%;" border="0" cellspacing="0" cellpadding="0px">
  <tr>
    <td style="width:150px;"> 左边<br/>欢迎访问<br/><a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">中国建站</a><br/>我们的网址是：<br/><a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">www.jz123.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="http://web.archive.org/web/20150530090042/http://myjs.jz123.cn/">网页特效</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">电子书籍</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">源码下载</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">酷站欣赏</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">站长工具</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">论坛系统</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">模板素材</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">免费收录</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">商城系统</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">站长资讯</a><br/>
<a href="http://web.archive.org/web/20150530090042/http://www.jz123.cn/">教程文章</a><br/>
</td>
  </tr>
</table>
</body>
</html>

可拖动拉伸的左右分栏效果，很常用的一个网页特效。

将本文收藏到QQ书签与更多好友分享

上一篇：文章：可拉伸移动的DIV层效果下一篇：文章：可以显示隐藏并移动的层效果

网页特效

可拖动拉伸的左右分栏

本类浏览排行 »

本站推荐文章 »