模拟Windows升级页面特效

最新推荐文章于 2024-07-30 17:30:27 发布

原创最新推荐文章于 2024-07-30 17:30:27 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#windows #function #button #null #javascript #border

JavaScript 专栏收录该内容

136 篇文章

订阅专栏

博客给出了一段模拟Windows升级页面特效的JavaScript代码。代码定义了BorderMove对象，包含获取元素位置、初始化、显示和移动等方法，通过点击按钮触发特效，实现页面边框的移动和收缩效果。

代码如下：
<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 全选提示:你可先修改部分代码,再点运行代码]