页面载入的动画效果的源代码一例4

<script language="javascript">

var beginMoving=false;

function MouseDownToMove(obj){

obj.style.zIndex=1;

obj.mouseDownY=event.clientY;

obj.mouseDownX=event.clientX;

beginMoving=true;

obj.setCapture();

}

//more javascript from http://knowsky.com

function MouseMoveToMove(obj){

if(!beginMoving) return false;

obj.style.top = (event.clientY-obj.mouseDownY);

obj.style.left = (event.clientX-obj.mouseDownX);

}

function MouseUpToMove(obj){

if(!beginMoving) return false;

obj.releaseCapture();

obj.style.top=0;

obj.style.left=0;

obj.style.zIndex=0;

beginMoving=false;

var tempTop=event.clientY-obj.mouseDownY;

var tempRowIndex=(tempTop-tempTop%25)/25;

if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;

else tempRowIndex=tempRowIndex+obj.rowIndex;

if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;

obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);

}

</script>

用鼠标移动TR<br>

<TABLE WIDTH="300" BORDER="1" >

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR>

</script>

</TABLE>