主题:  滑入滑出无框页面全攻略

叮咚虫

职务:普通成员
等级:1
金币:0.0
发贴:89
注册:2002/5/27 18:57:31
#12002/8/31 2:27:51
很酷的效果,并做了很详细的分析

演示:http://www.hot4.org/temp/winmove

代码分析:http://www.edd8.com/bbs/dispbbs.asp?boardID=46&RootID=588&ID=588



再坚持就会胜利

职务:普通成员
等级:3
金币:10.0
发贴:1241
注册:2001/1/11 11:05:12
#22002/8/31 10:30:03
-----------------------
www.hot4.org/temp/winmove 演示

实现以上的效果不需要任何的js文件,代码也很短,效果却不错,主要的代码就两处,一个是无框页面的滑入,一个是滑出
首先要做一个索引页,也就是你要首先打开的页面,比如 index.htm

这个页面里不需要任何的内容,他的作用就是制造一个无框页面然后把它滑入页面,然后关闭自己的这个索引页,只要在这个页面的里加入如下代码:






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或其以上版本浏览,谢谢!");}


记住其中的这段代码挺重要的:






如果没有这段代码,那么这个索引页就不会自己关闭,如果自己不关闭,就会有些小的问题,呵呵

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);
}


然后在关闭窗口的叉叉图片上这样做:

close window

也就是加入onclick='exit()' 这个代码,这样就可以滑出关闭了。




--------------------------------------------------------------------------------

最后要说的一点是winmove这个页面要定义一下css,把页面的滚动条定义为无,否则无框页面会存在一个滚动条的



好了,大家试试看吧
-----------------------------------------
帮大家贴出来



hanwo

职务:普通成员
等级:1
金币:0.0
发贴:147
注册:2002/8/26 10:56:29
#32002/9/2 18:10:14
很酷,不错!



shanban

职务:普通成员
等级:1
金币:2.0
发贴:46
注册:2002/9/2 18:10:38
#42002/9/2 18:12:24
我已经做出来了。
nehoo.126.com



7877767

职务:普通成员
等级:2
金币:1.0
发贴:528
注册:2002/2/19 0:11:31
#52002/9/3 3:25:27
我已经做出来了。
nehoo.126.com
请问楼上。你还做了个最小化的钮,在上面加的什么代码?



缺缺

职务:管理员
等级:8
金币:41.0
发贴:9620
注册:2004/1/14 19:14:47
#62002/9/3 11:29:50
7877767在上个帖子中说
引用:
我已经做出来了。
nehoo.126.com
请问楼上。你还做了个最小化的钮,在上面加的什么代码?









onClick="min.Click()



diablo

职务:普通成员
等级:1
金币:0.0
发贴:44
注册:2000/11/9 19:26:05
#72002/9/4 13:49:34
这个无框的页面最好能做成 可以鼠标拖动的



cjhuts

职务:普通成员
等级:1
金币:1.0
发贴:146
注册:2002/8/26 16:55:58
#82002/9/4 14:39:52
我用了的话,你们不会说我盗版吧???!!!有没有从上而下的???
对角的更好!!!或者是在桌面中间慢慢溶解的!!那此不是更cool???



yidianyike

职务:普通成员
等级:1
金币:0.0
发贴:139
注册:2002/9/3 9:14:18
#92002/9/4 16:32:52
做的真实不错的,但我打开的时候为什么总有两次的闪烁!