右下角消息提示框



<html>
<head>

<title>天涯网痕</title>

<style type="text/css">
#tip {position: absolute;right: 0px;bottom: 0px;height: 0px;width: 250px;border: 1px solid #CCCCCC;background-color: #e0ecff;
      padding: 1px;overflow:hidden;display:none;font-size:12px;z-index:10;}
#tip h1{font-size:14px;height:23px;line-height:25px;background-color:#0066CC;color:#FFFFFF;
        padding:0px 3px 0px 3px; margin:0}
#tip h1 a{float:right;text-decoration:none;color:#FFFFFF;}
.tipmsg{ text-align:center; line-height:23px; padding:5px; font-size:14px; color:red;}
</style>

<script type="text/javascript">
var handle;
function start(){
  var obj = document.getElementById("tip");
  if (parseInt(obj.style.height)==0)  { 
     obj.style.display="block";
     handle = setInterval("changeH('up')",2);
  }
  else{
     handle = setInterval("changeH('down')",2) 
  } 
}
function changeH(str){
  var obj = document.getElementById("tip");
  if (str=="up"){
     if (parseInt(obj.style.height)>100)
        clearInterval(handle);
     else
        obj.style.height=(parseInt(obj.style.height)+8).toString()+"px";
  }
  if (str=="down"){
     if (parseInt(obj.style.height)<8){ 
        clearInterval(handle);
        obj.style.display="none";
     }
     else 
       obj.style.height=(parseInt(obj.style.height)-8).toString()+"px"; 
  }
}
function recover(){
  document.getElementsByTagName("html")[0].style.overflow = "auto";
  document.getElementById("shadow").style.display="none";
  document.getElementById("detail").style.display="none"; 
}
</script> 


</head>
<body onload="document.getElementById('tip').style.height='0px'">
<!-- 新短消息提示-->

<div id="tip">
  <h1><a href="javascript:void(0)" onclick="start()">×</a>新短消息</h1>
  <div class="tipmsg">您有(<font color="#FF0000">8</font>)条新短消息<br />
  <a href="http://www.baidu.com">马上查看</a></div>
</div>
<script type="text/javascript"> 
  setTimeout("start()",1000);
  setTimeout("start()",5000); 
</script>

<!-- 提示完毕-->
</body>

</html>
右下角消息提示框

猜你喜欢
