将就写的,能实现效果,但没除BUG,也就是个思路吧
<body>
<table id=container bgcolor="#000000" width="500">
<tr height="20"><td id="previousTD" bgcolor="#ffffff"></td><td id="drag" style="width:1px;background-color:brown;cursor:e-resize;"></td><td id="nextTD" bgcolor="#ffffff"></td></tr>
</table>
<script type="text/javascript">
var obj=document.getElementById("drag");
var table=document.getElementById("container");
var startPoint=0;
var dragOn=false;
var td1=document.getElementById("previousTD");
var td2=document.getElementById("nextTD");
td1.width=td1.offsetWidth;
td2.width=td2.offsetWidth;
drag.onmousedown=function()
{
dragOn=true;
startPoint=event.clientX;
}table.onmouseup=function()
{
if(dragOn)
{
dragOn=false;
}
}table.onmousemove=function()
{
if(dragOn)
{
var distance=event.clientX-startPoint;
td1.width-=0-distance;
td2.width-=distance;
window.status=td1.width+","+td2.width+","+distance;
startPoint=event.clientX;
}
}
</script>
</body>