模拟Windows升级页面特效
代码如下：
<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 全选 提示:你可先修改部分代码,再点运行代码]
