1、需要在页面的body中加载弹出的方法:
<body onLoad="document.getElementById('tip').style.height='0px';start()">
2、需要把提示的div放到页面的底部
<div id="tip" style="text-align:12px;"><h1><a href="javascript:void(0)" οnclick="start()">×</a>最新通知</h1>
<ul>
<li> <img src="/images/fangkuai.png" />
这里有一个通知<a href="#">查看</a>!</li>
<pre name="code" class="html"><span style="white-space:pre"> </span><li> <img src="${ctx}/images/fangkuai.png" />
这里有一个通知<span style="font-family: Arial, Helvetica, sans-serif;"><a href="#">查看</a></span>!</li>
<span style="white-space:pre"> </span><li> <img src="${ctx}/images/fangkuai.png" />
这里有一个通知<span style="font-family: Arial, Helvetica, sans-serif;"><a href="#">查看</a></span>!</li>
</ul></div>
3、这里是js主要方法
<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)>200){
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 showwin(){
document.getElementsByTagName("html")[0].style.overflow = "hidden";
start();
document.getElementById("shadow").style.display="block";
document.getElementById("detail").style.display="block";
}
function recover(){
document.getElementsByTagName("html")[0].style.overflow = "auto";
document.getElementById("shadow").style.display="none";
document.getElementById("detail").style.display="none";
}
</script>
4、这里是css样式
<style type="text/css">
#tip ul li{}
#tip {
position:fixed;
right:0px;
bottom:0px;
height:0px;
width:300px;
border:1px solid #8093ba;
background-color:#ffffff;
padding:1px;
overflow:hidden;
display:none;
font-size:12px;
z-index:10;
}
#tip h1 {
font-size:14px;
height:26px;
line-height:26px;
background-color:#0587DF;
color:#fff;
padding:0px 3px 0px 3px;
}
#tip p {padding-left:10px; color:#000000;}
#tip h1 a {float:right;text-decoration:none;color:#fff;}
</style>
5、这是通知的提示的小图标