📄 0124.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!-- saved from url=(0032)http://www.ie-zone.com/index.php --><HTML><HEAD><TITLE>SplashWindow应用</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK href="../../fav.ico" rel="shortcut icon"><STYLE type=text/css>BODY { MARGIN: 25px 25px 25px}#all TD { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "新宋体", "宋体"}INPUT { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"}SELECT { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"}P { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"}TEXTAREA { FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"}#all A:active { COLOR: #7d070c}#all A:visited { COLOR: #7d070c}#all A:hover { COLOR: #336699}#all A:link { COLOR: #7d070c}</STYLE><SCRIPT language=JavaScript><!--function MM_goToURL() { //v3.0 var i, args=MM_goToURL.arguments; document.MM_returnValue = false; for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");}function JM_cc(ob){var obj=MM_findObj(ob); if (obj) { obj.select();js=obj.createTextRange();js.execCommand("Copy");}}function MM_findObj(n, d) { //v4.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && document.getElementById) x=document.getElementById(n); return x;}//--></SCRIPT><META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD><BODY id=all text=#000000 bgColor=#336699><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TR bgColor=#ffffff> <TD><IMG src="../images/sq_1.gif" width=11 height="14"></TD> <TD width="100%"></TD> <TD><IMG src="../images/sq_2.gif" width=11 height="14"></TD> </TR></TABLE><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TR bgColor=#ffffff> <TD><IMG src="../../images/space.gif" width=11 height="1"></TD> <TD width="100%"> <table width="100%" border="0" cellpadding="8"> <tr> <td align="center"> <script language="JavaScript">document.write("<font color=#7d070c style=\"font-size: 14px\">"+document.title+"</font>");</script> </td> </tr> <tr> <td bgcolor="#f7f7f7"> <script language="JavaScript"> 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.moveTo(300,150); }</script> 今天在Jet的网站<a href="../../../jet.cnnf.net/index.html" target="_blank">[织梦地带]</a>看到一个很Cool的SplashWindow, 那今天我们就来讲讲这个SplashWindow .[程序不是小人写的，我是抄的~ :) 资源共享嘛~ ]<br> <input type="button" name="Button2" value="点这里看看什么是SplashWindow窗口" onClick=sWin('e12221021.htm') > <font color="#990000"> 转载讲解请注明</font> <font color="#990000"> 无忧脚本 51JS.COM</font> [网站新建立要靠这来添加人气罗~:)]<br> <br> <img src="img/step.gif" width="30" height="30"> <b>使用说明与简单实现:</b>一般的，浏览器并不允许设计者打开一个没边框与标题栏的窗口，但当你生成一个全屏的窗口时<a href="../example/fullscreen/index.htm" target="_blank">[如何生成一个全屏的窗口?]</a>并不带有边框与标题栏，这时我们就可以利用重新设定窗口的大小来获得此效果，如下打开新全屏幕的代码为:<br> <table width="100%" border="0" cellspacing="5" cellpadding="0" bgcolor="#dddddd"> <tr> <td>var splashWin = window.open(URL, name,<br> "fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")</td> </tr> </table> <br> 通过上面这段代码我们可以打开一个新的全屏窗口，现在我们可以通过 resizeTo与moveTo来改变窗口的属性<br> <table width="100%" border="0" cellspacing="5" cellpadding="0" bgcolor="#dddddd"> <tr> <td>splashWin.resizeTo(width, height);<br> splashWin.moveTo(left, top);</td> </tr> </table> <br> 现在你已经可以生成SplashWindow了，但并不能拖动，但请别心急~~:)我们先来看看第一步完整的实现代码:<br> <table width="100%" border="0" cellspacing="5" cellpadding="0" bgcolor="#dddddd"> <tr> <td>function sWin(url){<br> splashWin = window.open(url, 'tip', 'fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0' );<br> splashWin.resizeTo <font color="#990000">(300,200</font>);//你可以自由修改SplashWin的初始位置<br> splashWin.moveTo(<font color="#990000">300,150</font>);<br> } </td> </tr> </table> <br> 最后调用 sWin('test.htm') 看看效果:)别忘记在test.htm内加入<body <font color="#990000">scroll=no</font>.....>啊~; <p><img src="img/step2.gif" width="30" height="30"> <b>为SplashWin添加可拖动属性: </b>通过第一步你是否觉得还差点东西呢？让我们来为它加上可拖动的属性，这里我们使用了Dhtml Lib中的一个Genmove的脚本来帮助我们实现此功能.<a href="js/move.js" target="_blank">[点这里下载 Genmove.js] </a><br> 在页面<font color="#990000">[注:此页面是指新打开的页面即上方window.open中url页面]</font>中加入下面这段代码引入Genmove. <table width="100%" border="0" cellspacing="5" cellpadding="0" bgcolor="#dddddd"> <tr> <td><script language="JavaScript" src="move.js"></script></td> </tr> </table> <br> 对于新页面首先请设置页面的<body>如下 <table width="100%" border="0" cellspacing="5" cellpadding="0" bgcolor="#dddddd"> <tr> <td><body bgcolor="#FFFFFF" text="#000000" <font color="#990000">scroll=no leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"</font>></td> </tr> </table> <br> 如何使用Genmove?请先为你的页面添加一个层，下面列出例子中使用源代码.<br> <table width="100%" border="0" cellspacing="5" cellpadding="0" bgcolor="#dddddd"> <tr> <td><div id="<font color="#990000">Layer1</font>" style="position:absolute; left:0px; top:0px; width:300px; height:200px; z-index:1" > <br> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"><br> <tr <font color="#990000">class=handle handlefor="Layer1"</font>> <!--注意:这里是生成移动把手的,通过指定<font color="#990000">handlefor</font>来指出要移动的层 --><br> <td bgcolor="#FF9900"><br> <table width="100%" border="0" cellspacing="5" cellpadding="0"><br> <tr><br> <td>无忧脚本 51JS.COM</td><br> <td align="right"> <a href="####"><img src="imgs/close.gif" width="12" height="12" onClick=window.close() border="0" alt="点这里关闭此窗口"></a></td><br> </tr><br> </table><br> </td><br> </tr><br> <tr><br> <td bgcolor="#eeeeee" height="170" <font color="#990000">id=content</font>> <!-- 这里的<font color="#990000">content</font>是为下一步添加小把戏而用的 --><br> <table width="100%" border="0" cellspacing="5" cellpadding="0"><br> <tr><br> <td>你可以任意拖动此窗口，注意此视窗并非用层生成，其实现主要是利用改变全屏窗口的大小而改变的，因此这是一个全新的窗口，通过分析源代码你可以发现其打开方式同样是使用到Window.open,关于如何生成？请查看教程与使用步骤.</td><br> </tr><br> </table><br> </td><br> </tr><br> </table><br> </div></td> </tr> </table> <img src="img/step3.gif" width="30" height="30"> <b>锦上添花:</b>习惯使用window的人都知道活动的窗口与非活动的窗口是有分别的，那就让我们加上这点分别:<font color="#990000">[本例简单改变内容的底色，当然你也可以加其它的花啦~]<br> </font>我已把功能内嵌到<a href="js/move.js" target="_blank">Genmove.js</a>内了，你可以查看源代码看看加了什么语句，很简单的！但你还需要在你的页面内添加下面的代码<br> <table width="100%" border="0" cellspacing="5" cellpadding="0" bgcolor="#dddddd"> <tr> <td><style type="text/css"><br> <!--<br> .hi { background-color: #FFFFFF} --><br> </style></td> </tr> </table> <p><img src="img/step4.gif" width="30" height="30"> <b>OK了:</b>使用愉快~~ :)</p> </td> </tr> <tr> <td><br> </td> </tr> </table> </TD> <TD><IMG src="../../images/space.gif" width=11 height="1"></TD> </TR></TABLE><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TR bgColor=#ffffff> <TD><IMG src="../images/sq_3.gif" width=11 height="14"></TD> <TD width="100%"></TD> <TD><IMG src="../images/sq_4.gif" width=11 height="14"></TD> </TR></TABLE></BODY></HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -