日期:2012-06-06  浏览次数:20414 次

 

在原理主要是js代码

将如下代码放在.aspx中

<script language='javascript>

 //判断鼠标是否按下
 var mouseDown = false;
 //鼠标所在区域
 var IsTdArea=0;

 //鼠标按下
 function MouseDown(obj)
 {
  if(IsTdArea != 0)
  {
   obj.mouseDownY = event.clientY;
   obj.mouseDownX=event.clientX;
   obj.parentTdH = obj.offsetHeight;
   obj.pareneTdW=obj.offsetWidth;
   //获得table的高度
   obj.pareneTableH=obj.parentElement.parentElement.parentElement.offsetHeight;
   //获得table的宽度
   obj.pareneTableW=obj.parentElement.parentElement.parentElement.offsetWidth;
   obj.setCapture();
   mouseDown = true;
  }
  else
  {
   mouseDown = false;
  }
 }
 
 function MouseMove(obj)
 {
  if(mouseDown == true)
  {
   if(IsTdArea == 1 || IsTdArea == 2)
   {
    if(!obj.mouseDownX) return false;
    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>0)
    {
     obj.style.width = newWidth;
     obj.parentElement.parentElement.parentElement.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
    }
   }
   else if(IsTdArea ==3 || IsTdArea == 4)
   {
    if(!obj.mouseDownY) return false;
    var newHeight=obj.pareneTdH*1+event.clientY*1-obj.mouseDownY;
    if(newHeight>0)
    {
     obj.style.Height = newHeight;
     obj.parentElement.parentElement.parentElement.style.Height=obj.pareneTableH*1+event.clientY*1-obj.mouseDownY;
    }
   }
  }
  else
  {
   MouseOverTD(obj);
  }
 }
 
 function MouseUp(obj)
 {
  if(mouseDown == true)
  {
   obj.releaseCapture();
   obj.mouseDownY = 0;
   obj.mouseDownX=0;
   mouseDown = false;
   IsTdArea=0;
  }
  else
  {
   mouseDown = false;
   IsTdArea=0;
  }
 }
 
 function MouseOverTD(objchild)
 {
  var objTD = objchild;
  if(mouseDown == false)
  {
   //获得TD所属的Table
   var tbab = objTD.parentElement.parentElement.parentElement;
   //获得Table的左边坐标值
   var tbOffSetLeft =tbab.offsetLeft;
  
   if(objTD.offsetLeft <=(event.x+1) && objTD.offsetLeft >= (event.x-1))
   {
    //调整左边
    IsTdArea = 1;
    objTD.style.cursor ="w-resize";
    window.document.getElementById("Table1").style.cursor = "w-resize"; 
   }
   else if((objTD.offsetLeft+objTD.offsetWidth) <= (event.x+1) && (objTD.offsetLeft+objTD.offsetWidth) >= (event.x-1))
   {
    //调整右边
    IsTdArea = 2;
    objTD.style.cursor ="w-resize";
   }   
 &nbs