特效介绍
JS弹出窗口,预览时,会自动弹出一个窗口,或者点击按钮也可以触发弹窗,五秒后,弹窗会自动消失。如果您的浏览器阻止了弹窗,效果可能看不出来。运行下面的代码查看效果:
提示:您可以先修改部分代码再运行
使用方法
1、在head引入下面的js:
08 | var i_left=-popupwidth-50; |
13 | function showWindow() { |
14 | flyingwin = window.open( "" , "flyingwin" , "toolbar=no,width=" +popupwidth+ ",height=" +popupheight+ ",top=100,left=" +(-popupwidth)+ "" ); |
15 | flyingwin.document.open(); |
16 | flyingwin.document.write( "<html><title>漂浮的窗口</title><body text='#006600'><p align='center'><br><font size='+1' color=red><b>我爱模板网</b></font><br><br>五秒后本窗口消失!</p><\/body><\/html>" ); |
17 | flyingwin.document.close(); |
19 | marginright = screen.width+50 |
21 | if (document.layers) { |
22 | marginright = screen.width+50 |
24 | windowcenter=Math.floor(marginright/2)-Math.floor(popupwidth/2) |
27 | function movewindow() { |
28 | if (i_left<=windowcenter) { |
29 | flyingwin.moveTo(i_left,i_top) |
31 | timer= setTimeout( "movewindow()" ,pause) |
35 | timer= setTimeout( "movewindow2()" ,waitingtime) |
38 | function movewindow2() { |
39 | if (i_left<=marginright) { |
40 | flyingwin.moveTo(i_left,i_top) |
42 | timer= setTimeout( "movewindow2()" ,pause) |
2、如果想载入页面就弹窗,请在body的任意地方加入下面的调用代码:
3、如果想点击触发的话,可以再被点击的对象上加入下面的属性: