这是一款非常精致漂亮的仿MSN右下角弹出窗口,带关闭功能,直接复制代码就管用。演示要用到几个小图片,运行的时候点击右键保存一下,这里提供一种思路,并不完全局限于此种方法,熟能生巧。
先来看看运行效果截图:
在线演示地址如下:
具体代码如下:
<HTML> <HEAD> <title>仿MSN右下角弹窗</title> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <SCRIPT language=Javascript> document.writeln("<div id=https://www.jb51.net/article/\"msn\" style=https://www.jb51.net/article/\"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=https://www.jb51.net/article/\"100%\" border=https://www.jb51.net/article/\"0\" cellpadding=https://www.jb51.net/article/\"0\" cellspacing=https://www.jb51.net/article/\"0\" style=https://www.jb51.net/article/\"BORDER-TOP:#ffffff 1px solid; BORDER-LEFT:#ffffff 1px solid\" bgcolor=https://www.jb51.net/article/\"#cfdef4\">"); document.writeln("<tr><td height=https://www.jb51.net/article/\"24\" width=https://www.jb51.net/article/\"26\" style=https://www.jb51.net/article/\"FONT-SIZE:12px;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#0f2c8c\" valign=https://www.jb51.net/article/\"middle\"><img src=https://www.jb51.net/article/\"images/msgLogo.gif\" hspace=https://www.jb51.net/article/\"5\" align=https://www.jb51.net/article/\"absMiddle\" vspace=https://www.jb51.net/article/\"1\"\/><\/td>"); document.writeln("<td style=https://www.jb51.net/article/\"FONT-WEIGHT:normal;FONT-SIZE:9pt;BACKGROUND-IMAGE:url(images/msgTopBg.gif);COLOR:#1f336b;PADDING-TOP:4px\" valign=https://www.jb51.net/article/\"middle\" width=https://www.jb51.net/article/\"100%\">提示:<\/td>"); document.writeln("<td style=https://www.jb51.net/article/\"BACKGROUND-IMAGE:url(images/msgTopBg.gif);PADDING-TOP:2px\" valign=https://www.jb51.net/article/\"middle\" width=https://www.jb51.net/article/\"19\" align=https://www.jb51.net/article/\"right\"><img src=https://www.jb51.net/article/\"images/msgClose.gif\" hspace=https://www.jb51.net/article/\"3\" style=https://www.jb51.net/article/\"CURSOR:pointer\" onclick=https://www.jb51.net/article/\"closeDiv()\" title=https://www.jb51.net/article/\"关闭\"\/><\/td>"); document.writeln("<\/tr><tr><td colspan=https://www.jb51.net/article/\"3\" height=https://www.jb51.net/article/\"90\" style=https://www.jb51.net/article/\"PADDING-RIGHT:1px;BACKGROUND-IMAGE:url(images/msgBottomBg.jpg);PADDING-BOTTOM:1px\">"); document.writeln("<div style=https://www.jb51.net/article/\"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=https://www.jb51.net/article/\"/jscss/\" target=https://www.jb51.net/article/\"_blank\" style=https://www.jb51.net/article/\"FONT-WEIGHT:bold;COLOR:red\">>>游客:欢迎回来!<\/a><br><br><a href=https://www.jb51.net/article/\"http:/\" target=https://www.jb51.net/article/\"_blank\" style=https://www.jb51.net/article/\"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> <table cellpadding="0" cellspacing="0" bgcolor="#eeeeee"> <tr> <td valign="top"><p><br> </p> <p> </p> </td> </tr> </table> </BODY> </HTML>