模拟Windows升级页面特效

王朝system·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>模拟Windows升级页面特效</title>

</head>

<body>

<script language=javascript>

var BorderMove = new Object();

BorderMove.getx = function(tag)

{

x = tag.offsetLeft;

while(tag = tag.offsetParent)

{

x += tag.offsetLeft;

}

return x;

}

BorderMove.gety = function(tag)

{

y = tag.offsetTop;

while(tag = tag.offsetParent)

{

y += tag.offsetTop;

}

return y;

}

BorderMove.Init = function()

{

this.BeginWidth = window.document.body.offsetWidth;

this.BeginHeight = window.document.body.offsetHeight;

this.BeginLeft = window.document.body.offsetLeft;

this.BeginTop = window.document.body.offsetTop;

this.EndLeft = this.getx(this.toElementObj) + this.toElementObj.offsetWidth / 2;

this.EndTop = this.gety(this.toElementObj) + this.toElementObj.offsetHeight / 2;

this.TimeOut = 20;

this.MoveTime = 16;

this.Moved = 0

this.Distance = Math.sqrt(this.BeginLeft * this.BeginLeft + this.EndLeft * this.EndLeft);

this.MoveLeft = (this.EndLeft - this.BeginLeft) / this.MoveTime;

this.MoveTop = (this.EndTop - this.BeginTop) / this.MoveTime;

this.ContractWidth = this.BeginWidth / this.MoveTime;

this.ContractHeight = this.BeginHeight / this.MoveTime;

this.TimeOutId = null;

this.Div = window.document.createElement("DIV");

window.document.body.appendChild(this.Div);

}

BorderMove.Display = function(srcElementObjId,toElementObjId)

{

if(this.TimeOutId != null)

{

window.clearTimeout(this.TimeOutId);

window.document.body.removeChild(this.Div);

this.Div = null;

}

this.srcElementObj = window.document.getElementById(srcElementObjId);

this.toElementObj = window.document.getElementById(toElementObjId);

this.Init();

with(this.Div.style)

{

width = this.BeginWidth;

height = this.BeginHeight;

border = "1 dotted #cccccc";

position = "absolute";

left = this.BeginLeft;

top = this.BeginTop;

}

this.Move();

}

BorderMove.Move = function()

{

this.BeginWidth -= this.ContractWidth;

this.BeginHeight -= this.ContractHeight;

this.BeginLeft += this.MoveLeft;

this.BeginTop += this.MoveTop;

with(this.Div.style)

{

width = this.BeginWidth;

height = this.BeginHeight;

left = this.BeginLeft;

top = this.BeginTop;

}

this.Moved++;

if(this.Moved == this.MoveTime)

{

window.document.body.removeChild(this.Div);

this.Div = null;

this.Init();

}

else

{

this.TimeOutId = setTimeout("BorderMove.Move()",this.TimeOut);

}

}

</script>

<br><br><br><br><br><br><br><br>

<center><span id=Text>虚影目标对象</span></center>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<input type=button value="事件触发对象" onclick="BorderMove.Display(this.id,'Text')" id="Button">

</body>

</html>

[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航