首先要做一个索引页,也就是你要首先打开的页面,比如 index.htm
这个页面里不需要任何的内容,他的作用就是制造一个无框页面然后把它滑入页面,然后关闭自己的这个索引页,只要在这个页面的<body>里加入如下代码:
<!-- HHCtrl Object --> <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>
讲到这里,滑入的效果就OK了,现在讲滑出,开始我以为在关闭窗口的**图片里定义javascript:close()就可以关闭滑出了,可是发现只能关闭,但是不是滑出关闭,后来才知道这需要一个script才行
代码如下,把这个代码加入到引用页里,也就是这个示例的winmove.htm这里页里:
<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>
然后在关闭窗口的**图片上这样做:
<img src="http://www.45its.com/htmldata/2005-12-12/close_d.gif" alt="close window" onclick='exit()' style="cursor:hand" width="11" height="11">
最小化图片链接代码
<img src="http://www.45its.com/htmldata/2005-12-12/images/min.gif" border="0" alt="min window" onclick='min()' style="cursor:hand" width="11" height="11">
最小化的script
<object id="HHCtrl" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> <param name="Command" value="Minimize"> </object> <script> <!-- function min(){ this.focus();HHCtrl.Click(); } --> </script>
最后要说的一点是winmove这个页面要定义一下css,把页面的滚动条定义为无,否则无框页面会存在一个滚动条的
<style type="text/css"> <!-- body { overflow:hidden } --> </style>
|