JavaScript实例教程(十)页面窗口的由小变大

861191371

861191371

2016-02-19 14:39

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的JavaScript实例教程(十)页面窗口的由小变大,过去的都会过去,迎接崭新的开始,释放更美好的自己。

  有没有这种经历,当你打开一个链接的时候,浏览器窗口由小变大,呈现一个渐变的过程。下面,我们就来介绍这种动态效果的由来,大家可要看仔细了。

  这种程式的思路就是先根据浏览器的可利用的宽度和高度,算出一个中心坐标点,然后每次都把窗口定位到这个点上,再算出相应窗口的变大尺寸,循环50次,从而最终回到浏览器最大化时的状态。

在body和/body之间插入下列代码

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

SCRIPT LANGUAGE="JavaScript"
!-- Begin
function expand() {
for(x = 0; x 50; x++) {
window.moveTo(screen.availWidth * -(x - 50) / 100, screen.availHeight * -(x - 50) / 100);
//定义动态的窗口定位点
window.resizeTo(screen.availWidth * x / 50, screen.availHeight * x / 50);
//定义动态窗口的尺寸
}
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
//当50次的变动完成,定位窗口回到(0,0),大小为最大化时的状态。
}
// End --
/script
p
a href="http://www.5dmedia.com" onClick="expand();"点击链接看效果/a

这里的链接可以填入你所希望的网址

我们运行一下,就可以看到以下的效果了:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

JavaScript实例教程(十)页面窗口的由小变大

开始时

JavaScript实例教程(十)页面窗口的由小变大

最后

展开更多 50%)
分享

猜你喜欢

JavaScript实例教程(十)页面窗口的由小变大

Web开发
JavaScript实例教程(十)页面窗口的由小变大

JavaScript实例教程(五)JavaScript的窗口操作

Web开发
JavaScript实例教程(五)JavaScript的窗口操作

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Javascript实例教程(13) 鼠标触发窗口

Web开发
Javascript实例教程(13) 鼠标触发窗口

用JS将网页窗口由小变大

电脑网络
用JS将网页窗口由小变大

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Javascript实例教程(1) 创建弹出式窗口

Web开发
Javascript实例教程(1) 创建弹出式窗口

Javascript实例教程(16)

Web开发
Javascript实例教程(16)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

通过PL/SQL访问Web Services

通过PL/SQL访问Web Services

linux如何调试多进程程序

linux如何调试多进程程序
下拉加载更多内容 ↓