www.hot4.org/temp/winmove 演示
实现以上的效果不需要任何的js文件,代码也很短,效果却不错,主要的代码就两处,一个是无框页面的滑入,一个是滑出
首先要做一个索引页,也就是你要首先打开的页面,比如 index.htm
这个页面里不需要任何的内容,他的作用就是制造一个无框页面然后把它滑入页面,然后关闭自己的这个索引页,只要在这个页面的里加入如下代码:
var w=640,h=340;
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或其以上版本浏览,谢谢!");}
记住其中的这段代码挺重要的:
如果没有这段代码,那么这个索引页就不会自己关闭,如果自己不关闭,就会有些小的问题,呵呵
var w=640,h=420
上面代码里的这句话大家应该都知道,是定义无框窗口的大小的
mm=setTimeout("go()",500);
这句话是定义运行速度的,大家可以通过更改数值来改变速度
var popup=window.open('winmove.htm','','fullscreen=1');
这句话就是无框窗口中引用的页面,大家应该都明白吧?
讲到这里,滑入的效果就OK了,现在讲滑出,开始我以为在关闭窗口的叉叉图片里定义javas cript:close()就可以关闭滑出了,可是发现只能关闭,但是不是滑出关闭,后来才知道这需要一个s cript才行
代码如下,把这个代码加入到引用页里,也就是这个示例的winmove.htm这里页里:
var w=640,h=420;
var xstep=0,targetx=(screen.width-w)/2,targety=(screen.height-h)/2;
function exit()
{
if(xstep+targetx{xstep=0.1+xstep*2;
window.moveTo(targetx+xstep,targety);}
else
{clearTimeout(mo);
window.close();}
mo=setTimeout("exit()",10);
}
然后在关闭窗口的叉叉图片上这样做:
也就是加入onclick='exit()' 这个代码,这样就可以滑出关闭了。
--------------------------------------------------------------------------------
最后要说的一点是winmove这个页面要定义一下css,把页面的滚动条定义为无,否则无框页面会存在一个滚动条的