本文實例講述了js實現仿MSN帶關閉功能的右下角彈窗代碼。分享給大家供大家參考。具體如下：
這是一款非常精致漂亮的仿MSN右下角彈出窗口，帶關閉功能，直接復制代碼就管用。演示要用到幾個小圖片，運行的時候點擊右鍵保存一下，這里提供一種思路，并不完全局限于此種方法，熟能生巧。
先來看看運行效果截圖：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-f-msn-close-able-adv-codes/
具體代碼如下：
<HTML><HEAD><title>仿MSN右下角彈窗</title><META http-equiv=Content-Type content="text/html; charset=gb2312"><SCRIPT language=Javascript>document.writeln("<div id=/"msn/" style=/"BORDER-RIGHT:#455690 1px solid; BORDER-TOP:#a6b4cf 1px solid; Z-INDEX:99999; LEFT:0px; BORDER-LEFT:#a6b4cf 1px solid; WIDTH:180px; BORDER-BOTTOM:#455690 1px solid; POSITION:absolute; TOP:0px; HEIGHT:116px; BACKGROUND-COLOR:#c9d3f3/">");document.writeln("<table width=/"100%/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/" style=/"BORDER-TOP:#ffffff 1px solid; BORDER-LEFT:#ffffff 1px solid/" bgcolor=/"#cfdef4/">");document.writeln("<tr><td height=/"24/" width=/"26/" style=/"FONT-SIZE:12px;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#0f2c8c/" valign=/"middle/"><img src=/"images/msgLogo.gif/" hspace=/"5/" align=/"absMiddle/" vspace=/"1/"http://><//td>");document.writeln("<td style=/"FONT-WEIGHT:normal;FONT-SIZE:9pt;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#1f336b;PADDING-TOP:4px/" valign=/"middle/" width=/"100%/">提示：<//td>");document.writeln("<td style=/"BACKGROUND-IMAGE:url(images/msgTopBg.gif);PADDING-TOP:2px/" valign=/"middle/" width=/"19/" align=/"right/"><img src=/"images/msgClose.gif/" hspace=/"3/" style=/"CURSOR:pointer/" onclick=/"closeDiv()/" title=/"關閉/"http://><//td>");document.writeln("<//tr><tr><td colspan=/"3/" height=/"90/" style=/"PADDING-RIGHT:1px;BACKGROUND-IMAGE:url(images/msgBottomBg.jpg);PADDING-BOTTOM:1px/">");document.writeln("<div style=/"BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%/"><a href=/"/jscss//" target=/"_blank/" style=/"FONT-WEIGHT:bold;COLOR:red/">>>游客：歡迎回來！<//a><br><br><a href=/"http://" target=/"_blank/" style=/"FONT-WEIGHT:bold;COLOR:blue/">>>您有（0）條短信息。<//a><//div><//div><//tr><//table><//div>");msn.style.top=document.body.clientHeight-174;msn.style.left=document.body.clientWidth-225;moveR();function moveR() {msn.style.top=document.body.scrollTop+document.body.clientHeight-116;msn.style.left=document.body.scrollLeft+document.body.clientWidth-180;setTimeout("moveR();",80)}function closeDiv(){msn.style.visibility='hidden';}</SCRIPT></HEAD><BODY style="MARGIN: 0px; TEXT-ALIGN: center"><table width="776" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeeee"> <tr> <td height="1060" align="center" valign="top"><p><br> </p> <p> </p> </td> </tr></table></BODY></HTML>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
