<!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" />
<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.codefans.net ">源码爱好者</a></td>
<td style="width:3px;cursor:e-resize;background-color:#cccccc;" align="center" valign="middle"
οnmοusedοwn="Resize_mousedown(event,this);" οnmοuseup="Resize_mouseup(event,this);" οnmοusemοve="Resize_mousemove(event,this);"><font style="size:3px;background-color:#eeeeee;cursor:pointer;" οnmοusedοwn="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>
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta name="author" content="CoLee" />
<meta http-equiv="Content-Type" content="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.codefans.net ">源码爱好者</a></td>
<td style="width:3px;cursor:e-resize;background-color:#cccccc;" align="center" valign="middle"
οnmοusedοwn="Resize_mousedown(event,this);" οnmοuseup="Resize_mouseup(event,this);" οnmοusemοve="Resize_mousemove(event,this);"><font style="size:3px;background-color:#eeeeee;cursor:pointer;" οnmοusedοwn="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>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
