- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
可拖动拉伸的左右分栏效果，你使用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>