软件学堂

网游分类软件分类

JS实现幻灯片式弹出窗口

2012-11-03 来源:网络

【实例名称】

JS实现幻灯片式弹出窗口

【实例描述】

弹出窗口有很多比较有特色的效果。本例演示幻灯片方式的弹出效果。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>标题页-学无忧(www.xue51.com)</title>

<script language="javascript"> var popwindow;           //弹出窗口的ID var popwindowwidth=300;  // 弹出窗体的宽度 var popwindowheight=300  // 弹出窗体的长度 var popwindowtop=20 ;     // 窗体距离屏幕顶端的距离 var popwindowURL="12.18  幻灯片式弹出窗口1.htm"; // 弹出窗体的名称 var waitingtime=4;  // 窗体的停留时间 // 配置弹出窗口的速度 var pause=20; var step=40; var popwindowleft=-popwindowwidth-50; var marginright; var pagecenter; var timer; waitingtime= waitingtime*1000; //显示窗口 function showWindow() { popwindow = window.open(popwindowURL, "popwindow", "toolbar=no, width="+popwindowwidth+",height="+popwindowheight+", top="+popwindowtop+",left="+(popwindowwidth)+""); marginright = screen.width+50; pagecenter=Math.floor(marginright/2)-Math.floor(popwindowwidth/2); movewindow(); } //移动窗口 function movewindow()  { if (popwindowleft<=pagecenter) { popwindow.moveTo(popwindowleft,popwindowtop); popwindowleft+=step; timer= setTimeout("movewindow()",pause); } else { clearTimeout(timer); timer= setTimeout("movewindow2()",waitingtime); } } //移动窗口 function movewindow2()  { if (popwindowleft<=marginright) { popwindow.moveTo(popwindowleft,popwindowtop); popwindowleft+=step; timer= setTimeout("movewindow2()",pause); } else { clearTimeout(timer); popwindow.close();} } </script>

需要在body中添加一个按钮,代码如下所示: </head> <body bgcolor="#FFFFFF" > <input type="button" id="btn1" value="打开窗口" onclick="showWindow()" /> </body> </html>

【运行效果】

 幻灯片式弹出窗口运行效果

【难点剖析】

本例主要分两步实现弹出窗口的特效。第一步使用“window.open”方法打开窗口,第二步使用“movewindow”方法移动窗口,以实现幻灯片特效。

【源码下载】

为了JS代码的准确性,请点击:幻灯片式弹出窗口 进行本实例源码下载 

上一篇:JS实现页面随窗口的改变而改变
下一篇:弹出窗口生成器的JS代码怎么写

相关文章