当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

JS完成幻灯片式弹出窗口

JS完成幻灯片式弹出窗口

更新时间:2023-06-19 文章作者:未知 信息来源:网络 阅读次数:

编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

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代码的准确性,请点击:幻灯片式弹出窗口 进行本实例源码下载 


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html