| | | 特效窗口一网打尽 | | 2001-09-13·
·merry··yesky
| 1 2 3 4 下一页 对于一个购物网站来说,使用多窗口设计可能很有用,访客可能会发现自己机灵地穿梭在一个琳琅满目的商品网站里面,或者对于一个专业性技术网站则刚好相反,访客会觉得他们进入了一个复杂无比漩涡之中。在这里面,我大家介绍五则JavaScript制作的窗口特效,希望对你有所帮助,能好好利用。阅读本文之前,你必须对JavaScript有一定的认识。
注:这些特效,必须使用Internet Explorer 4.0 以上的浏览器。
1、 打开重叠窗口
你在访问一些网站时,可能遇到过这样一种情况:当你打开站首页时,就有几个小窗口重叠出现,让人有点眼花。这样设计的好处是:如果主页面会打开两个子窗口。第一个子窗口可以作为网站内容的显示区域,而第二个子窗口则可以用来当成导览工具列。这样一来,使用者可以直接把原来的主窗口关掉,网站设计者便可以完整地控制各个导览元素。
在 JavaScript 里面,如果我们在某个窗口A里面打开另一个窗口B,那么窗口A就成为窗口B的「母窗口(parent window)」或者说A窗口是B窗口的「打开者(opener)」。
下面的程序代码示范由A窗口里面打开B窗口:
<script language="javascript"> <!- var no2 = null; function cascade2() { no2 = window.open('cascade2.html','cas2','dependent,width=175,height=175,left=20,top=20'); } file://--> </script> <body ?onLoad="cascade2()" ?> |
2、 动态改变窗口尺寸
在天极网就曾有过这种窗口特效:一旦某个子窗口被打开,它的尺寸就并不是非得保持一定不可,而是随着访客的浏览窗口的改变而改变。这种情况虽说有点令人讨厌,但对于广告效果来说还是挺有效的。
以下是这种效果程序代码:
注:当onClick事件发生的时候,子窗口的宽度与高度便会增加或者减少200个像素。
var x = 0; function resizeMe() { if (x == 0) { self.resizeBy(200,200); x = 1; } else { if (x == 1) { self.resizeBy(-200,-200); x = 0; } } } |
resizeMe() 函数通过 window 对象的 resizeBy() 方法来让使用者在两种窗口尺寸之间自由切换。resizeBy() 与 resizeTo() 两种方法之间的主要差别在于前者的尺寸设定是相对性(relative)的,而后者则是使用绝对(absolute)尺寸。
如果你要改变JavaScript 建立的窗口的尺寸,千万记得要在打开窗口的时候加上 resizable 关键词。如果你没加的话,你打开的这些窗口可是会动也不动。
改变窗口尺寸赋予网站设计者网站应用程序开发过程中所迫切需要的弹性。请想象一个搜寻引擎使用者接口,它会打开一个新窗口,里面纯粹只显示一个文字输入字段让使用者输入搜寻关键词。使用者有两种选择:开始搜寻以及高级搜寻。按下高级搜寻按钮,该窗口便会自动放大高度,显示出高级搜寻选项让使用者选择。如果使用者直接按下「开始搜寻」按钮,程序便会开始进行搜寻并且自动放大窗口宽度用来显示搜寻结果。这些全部都在同一个地方就可以完成了。大部分的搜寻引擎接口都很笨重,一个又一个的超链接将使用者一次又一次地带离原本开始搜寻的页面。在我们想象中的弹跳窗口搜寻接口,使用者完全不会离开原有的画面,而且永远只需要点一下便可立刻回到原本的主窗口画面。
1 2 3 4 下一页 | | | 感谢
访问天极网,如果您觉得该文章涉及版权问题,请看这里!
|
|