您现在的位置是：首页 > 文章详情

杨老师课堂之JavaScript右下角广告弹框

日期：2018-05-11点击：346收藏

预览效果图：

Html代码：

<html> <body> <div id="silu"> <button onclick="tips_pop()">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button> </div> <div id="winpop"> <div class="title">您有新的短消息！<span class="close" onclick="tips_pop()">X</span></div> <div class="con">1条未读信息(</div> </div> </body> </html>

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-align: right; text-decoration: underline; line-height: 22px; } .close { position: absolute; right: 4px; top: -1px; color: #FFF; cursor: pointer; }

JavaScript代码：

window.onload=function(){//加载 document.getElementById('winpop').style.height='0px'; setTimeout("tips_pop()",800);//3秒后调用tips_pop()这个函数  } 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  } } }