模拟Windows升级页面特效

来源：互联网发布：健康档案软件编辑：程序博客网时间：2024/05/01 16:44

代码如下：
<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> <center>虚影目标对象</center> <input type=button value="事件触发对象" onclick="BorderMove.Display(this.id,'Text')" id="Button"></body></html>
[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]