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

"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
"http://www.w3.org/1999/xhtml" >

"Content-Type" content= "text/html; charset=gb2312" />
右下角的弹窗

<code class="js string">"text/css"</code> <code class="js plain">> </code> </div> <div class="line number9 index8 alt2"> <code class="js plain">body { background:</code> <code class="js preprocessor">#333333;} </code> </div> <div class="line number10 index9 alt1"> <code class="js preprocessor">#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} </code> </div> <div class="line number11 index10 alt2"> <code class="js preprocessor">#winpop .title { width:100%; height:20px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;} </code> </div> <div class="line number12 index11 alt1"> <code class="js preprocessor">#winpop .con { width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center} </code> </div> <div class="line number13 index12 alt2"> <code class="js preprocessor">#silu { font-size:13px; color:#999999; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;} </code> </div> <div class="line number14 index13 alt1"> <code class="js plain">.close { position:absolute; right:4px; top:-1px; color:</code> <code class="js preprocessor">#FFFFFF; cursor:pointer} </code> </div> <div class="line number15 index14 alt2"> <code class="js plain">
<code class="js string">"text/javascript"</code> <code class="js plain">> </code> </div> <div class="line number17 index16 alt2"> <code class="js keyword">function</code> <code class="js plain">tips_pop(){ </code> </div> <div class="line number18 index17 alt1"> <code class="js keyword">var</code> <code class="js plain">MsgPop=document.getElementById(</code> <code class="js string">"winpop"</code> <code class="js plain">);</code> <code class="js comments">//获取窗口这个对象,即ID为winpop的对象 </code> </div> <div class="line number19 index18 alt2"> <code class="js keyword">var</code> <code class="js plain">popH=parseInt(MsgPop.style.height);</code> <code class="js comments">//用parseInt将对象的高度转化为数字,以方便下面比较 </code> </div> <div class="line number20 index19 alt1"> <code class="js keyword">if</code> <code class="js plain">(popH==0){</code> <code class="js comments">//如果窗口的高度是0 </code> </div> <div class="line number21 index20 alt2"> <code class="js plain">MsgPop.style.display=</code> <code class="js string">"block"</code> <code class="js plain">;</code> <code class="js comments">//那么将隐藏的窗口显示出来 </code> </div> <div class="line number22 index21 alt1"> <code class="js plain">show=setInterval(</code> <code class="js string">"changeH('up')"</code> <code class="js plain">,2);</code> <code class="js comments">//开始以每0.002秒调用函数changeH("up"),即每0.002秒向上移动一次 </code> </div> <div class="line number23 index22 alt2"> <code class="js plain">} </code> </div> <div class="line number24 index23 alt1"> <code class="js keyword">else</code> <code class="js plain">{</code> <code class="js comments">//否则 </code> </div> <div class="line number25 index24 alt2"> <code class="js plain">hide=setInterval(</code> <code class="js string">"changeH('down')"</code> <code class="js plain">,2);</code> <code class="js comments">//开始以每0.002秒调用函数changeH("down"),即每0.002秒向下移动一次 </code> </div> <div class="line number26 index25 alt1"> <code class="js plain">} </code> </div> <div class="line number27 index26 alt2"> <code class="js plain">} </code> </div> <div class="line number28 index27 alt1"> <code class="js keyword">function</code> <code class="js plain">changeH(str) { </code> </div> <div class="line number29 index28 alt2"> <code class="js keyword">var</code> <code class="js plain">MsgPop=document.getElementById(</code> <code class="js string">"winpop"</code> <code class="js plain">); </code> </div> <div class="line number30 index29 alt1"> <code class="js keyword">var</code> <code class="js plain">popH=parseInt(MsgPop.style.height); </code> </div> <div class="line number31 index30 alt2"> <code class="js keyword">if</code> <code class="js plain">(str==</code> <code class="js string">"up"</code> <code class="js plain">){</code> <code class="js comments">//如果这个参数是UP </code> </div> <div class="line number32 index31 alt1"> <code class="js keyword">if</code> <code class="js plain">(popH<=100){</code> <code class="js comments">//如果转化为数值的高度小于等于100 </code> </div> <div class="line number33 index32 alt2"> <code class="js plain">MsgPop.style.height=(popH+4).toString()+</code> <code class="js string">"px"</code> <code class="js plain">;</code> <code class="js comments">//高度增加4个象素 </code> </div> <div class="line number34 index33 alt1"> <code class="js plain">} </code> </div> <div class="line number35 index34 alt2"> <code class="js keyword">else</code> <code class="js plain">{ </code> </div> <div class="line number36 index35 alt1"> <code class="js plain">clearInterval(show);</code> <code class="js comments">//否则就取消这个函数调用,意思就是如果高度超过100象度了,就不再增长了 </code> </div> <div class="line number37 index36 alt2"> <code class="js plain">} </code> </div> <div class="line number38 index37 alt1"> <code class="js plain">} </code> </div> <div class="line number39 index38 alt2"> <code class="js keyword">if</code> <code class="js plain">(str==</code> <code class="js string">"down"</code> <code class="js plain">){ </code> </div> <div class="line number40 index39 alt1"> <code class="js keyword">if</code> <code class="js plain">(popH>=4){</code> <code class="js comments">//如果这个参数是down </code> </div> <div class="line number41 index40 alt2"> <code class="js plain">MsgPop.style.height=(popH-4).toString()+</code> <code class="js string">"px"</code> <code class="js plain">;</code> <code class="js comments">//那么窗口的高度减少4个象素 </code> </div> <div class="line number42 index41 alt1"> <code class="js plain">} </code> </div> <div class="line number43 index42 alt2"> <code class="js keyword">else</code> <code class="js plain">{</code> <code class="js comments">//否则 </code> </div> <div class="line number44 index43 alt1"> <code class="js plain">clearInterval(hide);</code> <code class="js comments">//否则就取消这个函数调用,意思就是如果高度小于4个象度的时候,就不再减了 </code> </div> <div class="line number45 index44 alt2"> <code class="js plain">MsgPop.style.display=</code> <code class="js string">"none"</code> <code class="js plain">;</code> <code class="js comments">//因为窗口有边框,所以还是可以看见1~2象素没缩进去,这时候就把DIV隐藏掉 </code> </div> <div class="line number46 index45 alt1"> <code class="js plain">} </code> </div> <div class="line number47 index46 alt2"> <code class="js plain">} </code> </div> <div class="line number48 index47 alt1"> <code class="js plain">} </code> </div> <div class="line number49 index48 alt2"> <code class="js plain">window.onload=</code> <code class="js keyword">function</code> <code class="js plain">(){</code> <code class="js comments">//加载 </code> </div> <div class="line number50 index49 alt1"> <code class="js plain">document.getElementById(</code> <code class="js string">'winpop'</code> <code class="js plain">).style.height=</code> <code class="js string">'0px'</code> <code class="js plain">;</code> <code class="js comments"><br></code> </div> <div class="line number51 index50 alt2"> <code class="js plain">setTimeout(</code> <code class="js string">"tips_pop()"</code> <code class="js plain">,800);</code> <code class="js comments">//3秒后调用tips_pop()这个函数 </code> </div> <div class="line number52 index51 alt1"> <code class="js plain">} </code> </div> <div class="line number53 index52 alt2"> <code class="js plain">

"silu" > "tips_pop()" >测试按钮
"tips_pop()" >测试按钮

"winpop" > "title" >您有新的消息 "close" onclick= "tips_pop()" >X "con" >未读信息(1)
"title" >您有新的消息 "close" onclick= "tips_pop()" >X
"con" >未读信息(1)

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