页面右下角div提示，显示效果从下往上移动

这两天结合自己的excel导入做了一个页面右下角div的导入失败信息的提示。

首先在网上找了个个人觉得比较好看的div代码，经过修改之后基本能用。

div代码如下：

<mce:style><!-- #dialogBoxErr{ BORDER: 1px solid #104987; position:absolute; PADDING: 1px; WIDTH: 435px; DISPLAY: none; BACKGROUND: url(../images/div_bgs.gif) #1169b1 repeat-x 0px -68px; PADDING-TOP: 1px; font-size:12; margin:0; overflow:hidden; right:0; bottom:0; } --></mce:style><style mce_bogus="1">#dialogBoxErr{ BORDER: 1px solid #104987; position:absolute; PADDING: 1px; WIDTH: 435px; DISPLAY: none; BACKGROUND: url(../images/div_bgs.gif) #1169b1 repeat-x 0px -68px; PADDING-TOP: 1px; font-size:12; margin:0; overflow:hidden; right:0; bottom:0; } </style> <div id="dialogBoxErr" > <table style="BACKGROUND: url(../images/div_bgs.gif) repeat-x 0px -144px" mce_style="BACKGROUND: url(images/div_bgs.gif) repeat-x 0px -144px" border=0 cellspacing=0 cellpadding=0 width="100%"> <tr height="29" style="BACKGROUND: url(../images/div_bgs.gif) repeat-x 0px -144px" mce_style="BACKGROUND: url(images/div_bgs.gif) repeat-x 0px -144px"> <td> <table style="HEIGHT: 24px; -moz-user-select: none" border=0 cellspacing=0 cellpadding=0 width="100%"> <tr style="BACKGROUND: url(../images/div_bgs.gif) repeat-x 0px -144px" mce_style="BACKGROUND: url(images/div_bgs.gif) repeat-x 0px -144px"> <td height=24 width=6></td> <td style="COLOR: #ffffff; FONT-SIZE: 14px; FONT-WEIGHT: bold" mce_style="COLOR: #ffffff; FONT-SIZE: 14px; FONT-WEIGHT: bold" id="dialogBoxTitleErr"> 导入错误信息  </td> <td id="dialogCloseErr" valign="top" width="21" align="right" style="BACKGROUND: url(../images/1.jpg) #0D5CA2 no-repeat right" mce_style="BACKGROUND: url(images/1.jpg) #0D5CA2 no-repeat right" οnclick="tips_pop('dialogBoxErr', 200)"> <div style="WIDTH: 18px; MARGIN-BOTTOM: 2px; HEIGHT: 18px; CURSOR: pointer" id="dialogBoxCloseErr"> <div></div> </div> </td> <td width=9></td> </tr> </table> </td> </tr> <tr style="HEIGHT: 64px" id="container-trErr" valign="top"> <td align="left" style="word-break:break-all;word-wrap: break-word;POSITION: relative; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px" mce_style="word-break:break-all;word-wrap: break-word;POSITION: relative; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px"> <div style="BORDER-BOTTOM: #fff 1px solid; BORDER-LEFT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-RIGHT: #fff 1px solid" mce_style="BORDER-BOTTOM: #fff 1px solid; BORDER-LEFT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-RIGHT: #fff 1px solid"> <div style="LINE-HEIGHT: 13px; BACKGROUND: url(../images/div_bgs.gif) #fff repeat-x; HEIGHT: 13px; FONT-SIZE: 1px">   </div> <div style="BACKGROUND-COLOR: #fff; WIDTH: 411px; HEIGHT: 258px;padding-left: 10px;padding-right: 10px;overflow: auto;" id="dialogBodyErr">     </div> </div> </td> </tr> </table> </div>

 

将div插入到页面中，当然div中的背景图片需要修改路径，原本打算写一个不需要背景图片的div，但去掉背景图片之后感觉样式不怎么好看，于是把图片保留下来了，后面会把背景图片上传。

控制div的从下往上效果的js代码：

function tips_pop(id, divHeight){ var divObj=document.getElementById(id); var height=parseInt(divObj.style.height);//将对象的高度转化为数字 if (height==0){ divObj.style.display="block";//显示隐藏的窗口 show=setInterval("changeH('up', '"+id+"', "+divHeight+")",2); } else { hide=setInterval("changeH('down', '"+id+"', "+divHeight+")",2); } } function changeH(str, id, divHeight) { var divObj=document.getElementById(id); var popH=parseInt(divObj.style.height); if(str=="up"){ if (popH<=divHeight){ divObj.style.height=(popH+4).toString()+"px"; } else{ clearInterval(show); } } if(str=="down"){ if (popH>=8){ divObj.style.height=(popH-4).toString()+"px"; } else{ clearInterval(hide); divObj.style.display="none"; //隐藏DIV } } } function onloadDivContent(divTitle, divContent, divHeight, divWidth){ document.getElementById('dialogBoxErr').style.height='0px'; //alert(document.getElementById("dialogBoxTitleErr").innerText); document.getElementById("dialogBoxTitleErr").innerText = divTitle; document.getElementById("dialogBodyErr").innerHTML = divContent; document.getElementById('dialogBoxErr').style.width = divWidth; document.getElementById('dialogBodyErr').style.width = divWidth-24; document.getElementById('dialogBodyErr').style.height = divHeight-42; tips_pop("dialogBoxErr", divHeight); }

如需使用div从下往上的效果，只需调用js中的onloadDivContent(divTitle, divContent, divHeight, divWidth)方法即可

以下是div中用到的背景图片

          

 

以上的div和滚动效果都是从网上抄袭过来的