代碼如下：
<html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /><title>類比Windows升級頁面特效</title><br /></head><br /><body><br /><script language=javascript><br />var BorderMove = new Object();<br />BorderMove.getx = function(tag)<br />{<br /> x = tag.offsetLeft;<br /> while(tag = tag.offsetParent)<br /> {<br /> x += tag.offsetLeft;<br /> }<br /> return x;<br />}<br />BorderMove.gety = function(tag)<br />{<br /> y = tag.offsetTop;<br /> while(tag = tag.offsetParent)<br /> {<br /> y += tag.offsetTop;<br /> }<br /> return y;<br />}<br />BorderMove.Init = function()<br />{<br /> this.BeginWidth = window.document.body.offsetWidth;<br /> this.BeginHeight = window.document.body.offsetHeight;<br /> this.BeginLeft = window.document.body.offsetLeft;<br /> this.BeginTop = window.document.body.offsetTop;<br /> this.EndLeft = this.getx(this.toElementObj) + this.toElementObj.offsetWidth / 2;<br /> this.EndTop = this.gety(this.toElementObj) + this.toElementObj.offsetHeight / 2;<br /> this.TimeOut = 20;<br /> this.MoveTime = 16;<br /> this.Moved = 0<br /> this.Distance = Math.sqrt(this.BeginLeft * this.BeginLeft + this.EndLeft * this.EndLeft);<br /> this.MoveLeft = (this.EndLeft - this.BeginLeft) / this.MoveTime;<br /> this.MoveTop = (this.EndTop - this.BeginTop) / this.MoveTime;<br /> this.ContractWidth = this.BeginWidth / this.MoveTime;<br /> this.ContractHeight = this.BeginHeight / this.MoveTime;<br /> this.TimeOutId = null;<br /> this.Div = window.document.createElement("DIV");<br /> window.document.body.appendChild(this.Div);<br />}<br />BorderMove.Display = function(srcElementObjId,toElementObjId)<br />{<br /> if(this.TimeOutId != null)<br /> {<br /> window.clearTimeout(this.TimeOutId);<br /> window.document.body.removeChild(this.Div);<br /> this.Div = null;<br /> }<br /> this.srcElementObj = window.document.getElementById(srcElementObjId);<br /> this.toElementObj = window.document.getElementById(toElementObjId);<br /> this.Init();<br /> with(this.Div.style)<br /> {<br /> width = this.BeginWidth;<br /> height = this.BeginHeight;<br /> border = "1 dotted #cccccc";<br /> position = "absolute";<br /> left = this.BeginLeft;<br /> top = this.BeginTop;<br /> }</p><p> this.Move();<br />}<br />BorderMove.Move = function()<br />{<br /> this.BeginWidth -= this.ContractWidth;<br /> this.BeginHeight -= this.ContractHeight;<br /> this.BeginLeft += this.MoveLeft;<br /> this.BeginTop += this.MoveTop;<br /> with(this.Div.style)<br /> {<br /> width = this.BeginWidth;<br /> height = this.BeginHeight;<br /> left = this.BeginLeft;<br /> top = this.BeginTop;<br /> }<br /> this.Moved++;<br /> if(this.Moved == this.MoveTime)<br /> {<br /> window.document.body.removeChild(this.Div);<br /> this.Div = null;<br /> this.Init();<br /> }<br /> else<br /> {<br /> this.TimeOutId = setTimeout("BorderMove.Move()",this.TimeOut);<br /> }<br />}<br /></script><br /><br><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><br></p><p><input type=button value="事件觸發對象" onclick="BorderMove.Display(this.id,'Text')" id="Button"><br /></body><br /></html>
[Ctrl+A 全選 提示:你可先修改部分代碼,再點運行代碼]
轉自: http://goaler.xicp.net/Article/ShowArticle.asp?ID=471
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
