代码描述:JavaScript 网页弹出信息框。JavaScript网页右下角弹出广告信息框实例代码
右下角弹出窗口效果是常见的弹出窗口效果之一,比如可以作为广告窗口,也可以作为网站的一些公告或者通知,非常的实用,下面就通过实例简单介绍一下如何实现此功能,代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>网页右下角的信息框-51前端</title> </head> <style type="text/css"> #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none; } #winpop .title{ width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px; } #winpop .con{ width:100%; height:90px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center } #silu{ font-size:12px; color:#666; position:absolute; right:0; text-decoration:underline; line-height:22px; } .close{ position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer } </style> <script type="text/javascript"> function tips_pop(){ var MsgPop=document.getElementById("winpop"); var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字 if(popH==0){ MsgPop.style.display="block";//显示隐藏的窗口 show=setInterval("changeH('up')",2); } else{ hide=setInterval("changeH('down')",2); } } function changeH(str){ var MsgPop=document.getElementById("winpop"); var popH=parseInt(MsgPop.style.height); if(str=="up"){ if(popH<=100){ MsgPop.style.height=(popH+4).toString()+"px"; } else{ clearInterval(show); } } if(str=="down"){ if(popH>=4){ MsgPop.style.height=(popH-4).toString()+"px"; } else{ clearInterval(hide); MsgPop.style.display="none"; //隐藏DIV } } } window.onload=function(){ var oclose=document.getElementById("close"); var bt=document.getElementById("bt"); document.getElementById('winpop').style.height='0px'; setTimeout("tips_pop()",3000); oclose.onclick=function(){tips_pop()} bt.onclick=function(){tips_pop()} } </script> <body> <div id="silu"> <button id="bt">3秒后会在右下角自动弹出窗口,如果没有弹出请点击这个按钮</button> </div> <div id="winpop"> <div class="title">您有新的短消息!<span class="close" id="close">X</span></div> <div class="con">1条未读信息(</div> </div> </body> </html>
以上代码实现了我们需要的功能,下面简单介绍一下实现过程。 一.实现原理: 原理非常的简单,下面分步做一下简单的介绍: 1.让窗口居于网页的右下角: 实现代码如下:
<script> #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none; } </script>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能