制作无边移动窗口

ray · 发表于 2005-10-12 10:20

制作无边移动窗口！
制作方法：
  　　１、首先要做一个索引页，也就是你要首先打开的页面，比如 index.htm。这个页面里不需要任何的内容，他的作用就是制造一个无框页面然后把它滑入页面，然后关闭自己的这个索引页，只要在这个页面的<body>里加入如下代码：

<object id="CloseWindow" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
<script>
var w=640,h=420;
var xpos=0,ypos=0,targetx=(screen.width-w)/2,targety=(screen.height-h)/2;
function go()
{
if (targetx-xpos>1)
{xpos=(targetx+9*xpos)/10;
  popup.moveTo(xpos,targety);}
else
{clearTimeout(mm);
  this.focus();
  CloseWindow.Click();}
mm=setTimeout("go()",10);
}

self.moveTo(-2222,-2222);
var appName=navigator.appName;
//判断不是Netscape,Opera或Tencent Explorer
if (appName.indexOf('Microsoft')!=-1 && document.body.clientTop==2 && window.external.x!='Wibble')
{
var popup=window.open('winmove.htm','','fullscreen=1');
popup.moveTo(-1800,targety);
popup.resizeTo(w,h);
setTimeout("go()",500);
}
else
{alert("请使用IE5.0或其以上版本浏览,谢谢!");}
</script>

代码中：var popup=window.open('winmove.htm','','fullscreen=1'); winmove.htm为建立的 Chromeless Windows（无边移动窗品）文件，文件名可自定。我们下面会制作这个页面。
　　滑入的效果就OK了。

２、制作window.htm页面，内容自定。把代码加入到window.htm的<body>...</body>里：

<script>
var w=640,h=420;
var xstep=0,targetx=(screen.width-w)/2,targety=(screen.height-h)/2;
function exit()
{
if(xstep+targetx<screen.width)
{xstep=0.1+xstep*2;
  window.moveTo(targetx+xstep,targety);}
else
{clearTimeout(mo);
  window.close();}
mo=setTimeout("exit()",10);
}
</script>
在页面中，建立样式：BODY {OVERFLOW: hidden} ，使window.htm窗口无滚动条显示。
  　　插入关闭窗口的叉叉图片  ，在图片  上，添加属性代码：<img src="close_d.gif" alt="close window" onclick='exit()' style="cursor:hand"> ，也就是加入onclick='exit()' 这个代码，这样就可以滑出关闭了。

我们也可以制作Chromeless Windows（无边移动窗品）的最小化，把代码添加至window.htm的<head>...</head>里，Script代码：
<object id="HHCtrl" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Minimize">
</object>
<script>

</script>

制作无边移动窗口

相关帖子

浏览过的版块