模拟Windows升级页面特效

zoukankan html css js c++ java

模拟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> <center>虚影目标对象</center> <input type=button value="事件触发对象" onclick="BorderMove.Display(this.id,'Text')" id="Button"> </body> </html>
[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]
转自: http://goaler.xicp.net/Article/ShowArticle.asp?ID=471

青苹果Web应用商店 https://webapp.taobao.com/

PHP/ASP.NET/ASP/UCHOME/DISCUZ! X系列网站开发，详细需求联系QQ:8511978

查看全文

相关阅读:
nginx简介（轻量级开源高并发web服务器：大陆使用者百度、京东、新浪、网易、腾讯、淘宝等）（并发量5w）（一般网站apache够用了，而且稳定）
js中json数据简单处理（JSON.parse()和js中嵌套html）
js中json法创建对象（json里面的:相当于js里面的=）
SimpleDateFormat使用特定的解释
 eclipse+webservice开发实例
 android在Canvas使用drawBitmap画一幅画
 SoC嵌入式软件架构设计II：没有MMU的CPU虚拟内存管理的设计和实现方法
 SRM 590 DIV1
菜鸟教程工具（三）——Maven自己主动部署Tomcat
activity-alias使用

原文地址：https://www.cnblogs.com/Dicky/p/123107.html