6顶

可拖动拉伸的左右分栏

稿源：互联网 2022-06-16 10:27:00 点击： 3741 撤稿纠错

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

以下讨论的是和分栏相关的可拖动拉伸的左右分栏教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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="阿里西西，Web开发之家，alixixi com" />
<meta name="description" content="服务于广大Web开发爱好者的免费技术资源网站，提供最专业的网页制作教程，网站源码和模板下载，网页特效、站长资讯等建站资源；同时提供网站开发及技术支持服务。 记住我们的网址：www.alixixi.com，阿里西西，有你更精彩！alixixi"/>
<title>可拖动拉伸的左右分栏效果，阿里西西整理收集 。 alixixi com</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://js.alixixi.com">http://js.alixixi.com</a>
<hr />
<table   style="width:100%;height:100%;"   border=0     cellspacing=0   cellpadding=0px   >
  <tr>
    <td   style="width:150px;"   > 左边<br />欢迎访问<br/><a href="http://www.alixixi.com">阿里西西</a><br/>我们的网址是：<br/><a href="http://www.alixixi.com">www.alixixi.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="http://js.alixixi.com/">网页特效</a><br/>
<a href="http://book.alixixi.com/">电子书籍</a><br/>
<a href="http://down.alixixi.com/">源码下载</a><br/>
<a href="http://cool.alixixi.com/">酷站欣赏</a><br/>
<a href="http://tool.alixixi.com/">站长工具</a><br/>
<a href="http://bbs.alixixi.com/">论坛系统</a><br/>
<a href="http://mb.alixixi.com/">模板素材</a><br/>
<a href="http://dir.alixixi.com">免费收录</a><br/>
<a href="http://shop.alixixi.com">商城系统</a><br/>
<a href="http://www.alixixi.com/zz/">站长资讯</a><br/>
<a href="http://www.alixixi.com/web/">教程文章</a><br/>
</td>
  </tr>
</table>
</body>
</html>

关于可拖动拉伸的左右分栏的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2009101958641.shtml方便下次再访问哦。

·上一篇： 鼠标选择区特效
·下一篇： 滑动展开后收缩广告代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

可拖动拉伸的左右分栏

文章分类LIST >>返回首页

最新游戏

最新新闻