SplashWindow 使用指南

SplashWindow 使用指南

今天在Jet的网站[织梦地带]看到一个很Cool的SplashWindow, 那今天我们就来讲讲这个SplashWindow .[程序不是小人写的，我是抄的~ :) 资源共享嘛~ ]
转载讲解请注明无忧脚本 51JS.COM [网站新建立要靠这来添加人气罗~:)]

使用说明与简单实现:一般的，浏览器并不允许设计者打开一个没边框与标题栏的窗口，但当你生成一个全屏的窗口时[如何生成一个全屏的窗口?]并不带有边框与标题栏，这时我们就可以利用重新设定窗口的大小来获得此效果，如下打开新全屏幕的代码为:
var splashWin = window.open(URL, name,
"fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")

通过上面这段代码我们可以打开一个新的全屏窗口，现在我们可以通过 resizeTo与moveTo来改变窗口的属性
splashWin.resizeTo(width, height);
splashWin.moveTo(left, top);

现在你已经可以生成SplashWindow了，但并不能拖动，但请别心急~~:)我们先来看看第一步完整的实现代码:
function sWin(url){
splashWin = window.open(url, 'tip', 'fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0' );
splashWin.resizeTo (300,200);//你可以自由修改SplashWin的初始位置
splashWin.moveTo(300,150);
}

最后调用 sWin('test.htm') 看看效果:)别忘记在test.htm内加入<body scroll=no.....>啊~;
为SplashWin添加可拖动属性: 通过第一步你是否觉得还差点东西呢？让我们来为它加上可拖动的属性，这里我们使用了Dhtml Lib中的一个Genmove的脚本来帮助我们实现此功能.[点这里下载 Genmove.js]
在页面[注:此页面是指新打开的页面即上方window.open中url页面]中加入下面这段代码引入Genmove. <script language="JavaScript" src="move.js"></script>

对于新页面首先请设置页面的<body>如下 <body bgcolor="#FFFFFF" text="#000000" scroll=no leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

如何使用Genmove?请先为你的页面添加一个层，下面列出例子中使用源代码.
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:300px; height:200px; z-index:1" >
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr class=handle handlefor="Layer1"> 
<td bgcolor="#FF9900">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>无忧脚本 51JS.COM</td>
<td align="right"> <a href="####"><img src="imgs/close.gif" width="12" height="12" onClick=window.close() border="0" alt="点这里关闭此窗口"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#eeeeee" height="170" id=content> 
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>你可以任意拖动此窗口，注意此视窗并非用层生成，其实现主要是利用改变全屏窗口的大小而改变的，因此这是一个全新的窗口，通过分析源代码你可以发现其打开方式同样是使用到Window.open,关于如何生成？请查看教程与使用步骤.</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
锦上添花:习惯使用window的人都知道活动的窗口与非活动的窗口是有分别的，那就让我们加上这点分别:[本例简单改变内容的底色，当然你也可以加其它的花啦~]
我已把功能内嵌到Genmove.js内了，你可以查看源代码看看加了什么语句，很简单的！但你还需要在你的页面内添加下面的代码
<style type="text/css">

</style>