JS实现网页右下角“未读信息”效果弹窗

最新推荐文章于 2022-03-06 18:10:11 发布

G90322

最新推荐文章于 2022-03-06 18:10:11 发布

阅读量426

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Wtingting/p/6694763.html

版权

 
         <!DOCTYPE html PUBLIC  
         "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
         >  
        
         <html xmlns= 
         "http://www.w3.org/1999/xhtml" 
         >  
        
         <head>  
        
         <meta http-equiv= 
         "Content-Type" 
         content= 
         "text/html; charset=gb2312" 
         />  
        
         <title>右下角的弹窗</title>  
        
         </head>  
        
         <style type= 
         "text/css" 
         >  
        
         body { background: 
         #333333;}  
        
         #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden; display:none; background:#FFFFFF}  
        
         #winpop .title { width:100%; height:20px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;}  
        
         #winpop .con { width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center}  
        
         #silu { font-size:13px; color:#999999; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;}  
        
         .close { position:absolute; right:4px; top:-1px; color: 
         #FFFFFF; cursor:pointer}  
        
         </style>  
        
         <script type= 
         "text/javascript" 
         >  
        
         function 
         tips_pop(){  
        
         var 
         MsgPop=document.getElementById( 
         "winpop" 
         ); 
         //获取窗口这个对象,即ID为winpop的对象  
        
         var 
         popH=parseInt(MsgPop.style.height); 
         //用parseInt将对象的高度转化为数字,以方便下面比较  
        
         if 
         (popH==0){ 
         //如果窗口的高度是0  
        
         MsgPop.style.display= 
         "block" 
         ; 
         //那么将隐藏的窗口显示出来  
        
         show=setInterval( 
         "changeH('up')" 
         ,2); 
         //开始以每0.002秒调用函数changeH("up"),即每0.002秒向上移动一次  
        
         }  
        
         else 
         { 
         //否则  
        
         hide=setInterval( 
         "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" 
         ){ 
         //如果这个参数是UP  
        
         if 
         (popH<=100){ 
         //如果转化为数值的高度小于等于100  
        
         MsgPop.style.height=(popH+4).toString()+ 
         "px" 
         ; 
         //高度增加4个象素  
        
         }  
        
         else 
         {  
        
         clearInterval(show); 
         //否则就取消这个函数调用,意思就是如果高度超过100象度了,就不再增长了  
        
         }  
        
         }  
        
         if 
         (str== 
         "down" 
         ){  
        
         if 
         (popH>=4){ 
         //如果这个参数是down  
        
         MsgPop.style.height=(popH-4).toString()+ 
         "px" 
         ; 
         //那么窗口的高度减少4个象素  
        
         }  
        
         else 
         { 
         //否则  
        
         clearInterval(hide); 
         //否则就取消这个函数调用,意思就是如果高度小于4个象度的时候,就不再减了  
        
         MsgPop.style.display= 
         "none" 
         ; 
         //因为窗口有边框,所以还是可以看见1~2象素没缩进去,这时候就把DIV隐藏掉  
        
         }  
        
         }  
        
         }  
        
         window.onload= 
         function 
         (){ 
         //加载  
        
         document.getElementById( 
         'winpop' 
         ).style.height= 
         '0px' 
         ; 
         
         setTimeout( 
         "tips_pop()" 
         ,800); 
         //3秒后调用tips_pop()这个函数  
        
         }  
        
         </script>  
        
         <body> 
        
         <div id= 
         "silu" 
         >  
        
         <button onclick= 
         "tips_pop()" 
         >测试按钮</button>  
        
         </div>  
        
         <div id= 
         "winpop" 
         >  
        
         <div class= 
         "title" 
         >您有新的消息<span class= 
         "close" 
         onclick= 
         "tips_pop()" 
         >X</span></div>  
        
         <div class= 
         "con" 
         >未读信息(1)</div>  
        
         </div>  
        
         </body>  
        
         </html>

转载于:https://www.cnblogs.com/Wtingting/p/6694763.html

G90322

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现网页右下角“未读信息”效果弹窗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ...
复制链接

扫一扫