鼠標拖動改變左右單元格寬度

2009-06-04　來源/作者：懶人圖庫　分類：其他特效　 «»

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<style type="text/css">
BODY{margin:0px 0px}
</style>
<script language="javascript">
var oL,oT,oW,oH;
var oMX,oMY;
var obj,element;
var minW=100;
var maxW=500;
var resizable=false;

function doMove(e){
  if(!e)e=window.event;
  obj=e.srcElement || e.target;
  var mX=e.pageX || e.clientX;

if(resizable){
    w=oW;
    w=oW + mX - oMX;
    //tt.value=event.clientX;
    if(w<minW){w=minW;}
    if(w>maxW){w=maxW;}
    ResizeTo(w);
    return(true);
  }
  var cc="";
  if(obj.title && obj.title=="oWin"){
    l=0;
    w=parseInt(obj.offsetWidth);
    if(Math.abs(l+w-mX)<5)cc+="e";
    if(cc!=""){
      obj.style.cursor=cc+"-resize";
      return(true);
    }
  }  
  if(obj.style.cursor!="default"){
    obj.style.cursor="default";
  }
}

function doDown(e){
  if(obj.style.cursor!="default"){//開始改變大小
    //記錄鼠標位置和層位置和大小;
    if(!e)e=window.event;
    obj=e.srcElement || e.target;
    element=obj;
    oMX=e.pageX || e.clientX;
    oW=parseInt(element.offsetWidth);
    //改變風格;
    resizable=true;
    return(true);
  }
}

function doUp(){
  if(resizable){
    element.style.cursor="default";
    resizable = false;
    return(false);
  }
}

function ResizeTo(w){  
  var w=isNaN(w)?minW:parseInt(w);
  var w=w<minW?minW:w;
  element.width=w;
}
</script>
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" height="300">
  <tr>
    <td bgcolor="#CCCCCC" title="oWin"> </td>
    <td bgcolor="#848484"> </td>
  </tr>
</table>
<script language="javascript">
  document.onmousemove=doMove;
  document.onmousedown=doDown;
  document.onmouseup=doUp;
</script>
</body>
</html>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

標簽：其他特效