JS非Alert在网页右下角实现了“未读信息”效果的弹出窗口

本文讲述了一个JS非Alert在网页右下角实现“未读信息”效果弹出窗口的例子。分享给大家参考。具体如下：

这是一个网页右下角的弹出代码，是用Div Js技术联合创建的，不是那种Alert功能，而是模仿腾讯新闻右下角的弹出代码。为了给新手一个容易理解和学习的好例子，源代码的作者在代码中加入了丰富的注释，为新手学习和使用提供了极大的便利。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-f-alert-right-buttom-DLG-demo/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/title/title/head style type=' text/CSS ' body右下角的弹出窗口{ background: # 33333} # winpop { width:200pxheight:0px位置：绝对；right:0底部：0；border:1px固体# 999999；margin:0padding:1px飞越：隐藏；display:nonebackground:#FFFFFF}#winpop。标题{ width :100%；高度：20 px；线高：20 px；背景# FFCC00font-weight : bold；文本对齐：居中；font-size :12 px；}#winpop。con { width :100%；高度：80 px；线高：80 px；font-weight : bold；font-size :12 px；color: # FF0000文本修饰：下划线；文本对齐align:center } #路斯{ font-size :13 px；color: # 999999位置：绝对；right:0text-align : right；文本修饰：下划线；线高：22 px；}.关闭{ position:absoluteright:4pxtop :-1px；color: # FFFFFFcursor : pointer }/style script type=' text/JavaScript ' function tips _ pop(){ var MsgPop=document . getelementbyid(' winpop ')；//获取window对象，即ID为winpop varpoph=parsent(msgpop . style . height)的对象；//使用parseInt将对象的高度转换为数字，以便于在(popH==0){//如果窗口的高度为0msg pop . style . display=' block '；//然后显示隐藏窗口=setinterval ('change h ('up ')'，2)；//每0.002秒开始调用函数changeH('up ')，即每0.002秒上移}else {//否则hide=set interval(' changeH(' down ')'，2)；//每0.002秒开始调用函数changeH('down ')，即每0.002秒向下移动} } Function changeH(str){ var msgpop=document . getelementbyid(' winpop ')；var popH=ParSeint(MSgpop . style . height)；If(str=='up'){//如果此参数为UPif (popH=100){//如果高度转换为数值小于或等于100msppop。风格。高度=(poph4)。tostring()“px”；//将高度增加4像素}else{clearInterval(显示)；//否则，取消函数调用，这意味着如果高度超过100像素，它将不再增长} } if(str==' down '){ if(poph=4){//如果此参数为down msgpop . style . height=(poph-4)。tostring()“px”；//然后窗口高度降低4像素}否则{//否则，clearInterval(隐藏)；//否则，取消函数调用，这意味着如果高度小于4度，MsgPop.style.display='none '不会降低；//因为窗口有边框，所以还是可以看到1~2个像素没有缩进，所以此时隐藏DIV } } } window . onload=function(){//load document . getelementbyid(' winpop ')。style.height=' 0px//不知道为什么要初始化这个高度。不是已经在CSS中初始化了吗？说说setTimeout('tips_pop()'，800)。//3秒后调用函数tips _ pop()}/script body我们提供最新的网络编程、脚本编程、网页制作、网页设计和网页特效，为站长和网络编程从业者提供学习资料。HR Div id=' silo ' button onclick=' tips _ pop()' test button/button/Div id=' winpop ' Div class=' title '您有一条新消息span class=' close ' onclick=' tips _ pop()' x/span/Div class=' con '未读信息(1)/div/div/body/html希望这篇文章对JavaScript编程有所帮助。