“渐变窗口”有绝招

2016-01-29 12:39 29 1 收藏

“渐变窗口”有绝招,“渐变窗口”有绝招

【 tulaoshi.com - Html 】

    在JAVASCRIPT中,自动弹出窗口要算是最简单的“活”,只要懂得“OPEN”再加上一些修饰便立刻会打开一个美观大方的窗口。然而大家是否考虑过这样一个问题,能否让弹出的窗口逐渐变大,同时其内的文字或图片也随之慢慢地展开呢?(“哇噻,天方夜谭,不可能!”)好,今天就让笔者教大家一招:“渐变窗口”。

  老规矩我们先来看一段JAVASCRIPT程序:

<script language="JavaScript">
function windowslong(address,winName,features) //自定义窗口变量对象
{
windowschange=open(address,winName,features); //赋予自定义窗口变量对象以OPEN操作
for (var x=1;x<=50;x++) //对窗口的宽度进行循环设置,使其在打开时逐渐变宽
{
windowschange.resizeBy(2,0); //窗口宽度循环次数
}
for (var x=1;x<=70;x++)//对窗口的高度进行循环设置,使其在打开时逐渐变高
{
windowschange.resizeBy(0,1); //窗口高度循环次数
}
}
</script>


  这段程序的设计思路是:先建立一个窗口变量对象,接着对这个窗口变量中的尺寸通过循环语句进行设定,最后用“OPEN”和“resizeBy”操作属性加以实现。具体解释请看“//”后解释。

  好了,渐变窗口程序已经全部奉上,各位是否觉得简单?(别忙着关书,还有文章要作。)

    下面笔者将介绍如何使渐变窗口程序与网页代码结合起来,这可是重点呦!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>逐渐变化的窗口程序</title>
<script language="JavaScript">
function windowslong(address,winName,features) {
windowschange=open(address,winName,features);
for (var x=1;x<=50;x++){
windowschange.resizeBy(2,0);
}
for (var x=1;x<=70;x++){
windowschange.resizeBy(0,1);
}
}
</script>
</head>
<body onload="windowslong('top.htm','jswindows','width=1,height=1')" bgcolor="#FFFFFF" >
<a href="#" onClick="windowslong('top.htm','jswindows','width=1,height=1')">点击此处看看效果</a>
</html>

  “渐变窗口程序”的实现必须与网页对应起来,也就是说程序中的“windowslong(address,winName,features)”变量对象本身是没有参数的,这段程序并没有意义。若要使这段程序有意义,实现渐变功能就需要在网页中予其附值。以onload="windowslong('top.htm','jswindows','width=1,height=1')"为例,笔者给“windowslong()”对象赋予“打开新建窗口的地址(同目录下top.htm窗口),名称(jswindows),以及原始宽度(1象素)和高度(1象素)”。这样一来,“渐变程序”在执行时,就会先找到这个top.htm窗口,再逐渐打开这个窗口。另外,这里还要注意一点,那就是原始宽度(1象素)和高度(1象素)的设置,不能超过5象素,否则就失去了程序的魅力。

  看到这里我想各位一定会有一个问题,你用“渐变程序”打开的窗口到底有多大?嘻嘻,揭晓谜底:宽为100象素,高为70象素。怎么算?宽50×2×1;高70×1×1。至于数据从何而来,大家不妨自己推敲一下,给个提示,从“循环设置,循环次数以及原始尺寸”三方面着手。

  “渐变窗口”是JAVASCRIPT对窗口运用的一场革命,它彻底改变了原先那枯燥的弹出动作(不信!哼,你贴到网页上看看,保证你会爱上它!),令人心旷神怡!(若诸位还有问题的话,可以EMAIL本人:dibazh@online.sh.cn )

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

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

来源:http://www.tulaoshi.com/n/20160129/1486988.html

延伸阅读
标签: 产后 孕前
产后运动应坚持三个原则 新妈妈每日最好做到少食多餐,这样不会给胃肠增加负担,食物中的能量也能很快地被身体利用。反之,如果一次吃完,血液长时间地tuLaoShi.com集中在消化器官,使人昏昏欲睡,能量一时用不完便变成脂肪储存起来。下一餐来临时,由于过分饥饿又会吃得过多,从而形成恶性循环。 新妈妈不要以大吃水果的方式满足食欲来瘦身...
标签: 宝宝奶粉
五种水不宜用来冲奶粉 众所周知,奶粉质量的好坏会直接影响到宝宝们的身体发育,如果孩子们饮用了有质量问题的奶粉图老师,不仅无法补充幼儿营养,更会给宝宝们造成发育障碍,损害身体健康。其实,对于优质的奶粉来说,同样重要的还有冲调奶粉的水,有些人认为,矿泉水和纯净水是最佳选择,其实不然。下面,我们就来给您介绍...
标签: 电脑入门
在艾瑞早前发布的《2009年个人即时通讯网络安全研究报告》中,从基础安全特性、安全服务体系及安全环境建设三方面对国内几家主流即时通讯厂商进行了评测,其中腾讯QQ以全方位的生态安全建设体系获评“用户安全满意度最高”。究竟QQ是如何保障网友精彩在线生活安全的呢?图老师小编将通过系列实用教程为网友们一一解读,本次将从基础安全特...
标签: 美白
第一步:洁面 毛巾洗脸,指的是洗脸用的毛巾和粉扑、绢质粉扑等等。当你的脸部肌肤出现了粗涩不光滑的时候,可以用毛巾轻轻的揉洗皮肤,去掉肌肤表面的角质层,清理毛孔的堵塞物。 第二步:保湿化妆水 清洁完肌肤表面的污垢以后,派上用场的就是化妆水了。为了湿润角质使用保湿护肤品,选择简单且保湿能力强的产品为佳,最重要的是...
标签: 美容 美容方法
对于很多白领而言,熬夜似乎已经成为了家常便饭。虽然,大家也都知道熬夜对于肌肤的伤害,但是,生活的压力让她们别无选择。假如你不得不熬夜,那么就要学会熬夜族的护肤方法了。 白领族 美颜焕肤有绝招 作为上班一族,总有许多难以避免的肌肤小尴尬,在沉重的工作压力之下,肌肤失去了原有的光泽靓丽,变得暗沉晦暗。想要...

经验教程

881

收藏

61
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部