$(document).ready(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 <= 237) { 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 } } }
页面html
<div id="winpop"> <div class="title"> <span class="close" onclick="tips_pop()">关闭</span></div> <div class="con"></div> </div>
样式
#winpop{width: 494px;height: 272px;position: absolute;right: 0;bottom: 0;border: 1px solid #666;margin: -1;padding: 1px;overflow: hidden;display: none;z-index: 10;filter: alpha(opacity=85);opacity: 0.85;} #winpop .title{width: 100%;height: 15px;line-height: 15px;background: white;font-weight: bold;text-align: center;font-size: 12px;} #winpop .con{width: 100%;height: 240px;font-weight: bold;font-size: 12px;color: #FF0000;text-align: center;background: url(../images/Bulletin.jpg) 0 0 no-repeat;} #winpop .con .pp{height: 10px;line-height: 10px;} .close{position: absolute;right: 4px;top: -1px;color: #000;cursor: pointer;}