以下是 js模仿MSN弹出对话框特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>abc</title>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<script language=Javascript src="js/msn.js"></script>
</head>
<body style="MARGIN: 0px; TEXT-ALIGN: center">
<table width="778" height="153" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td> </td>
</tr>
</table>
<table width="778" height="1030" border="0" cellpadding="0" cellspacing="0" bgcolor="F4F4F4">
<tr>
<td height="1030"> </td>
</tr>
</table>
</body>
</html>
JS代码(msn.js):
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\"\/><\/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=\"�ر�\"\/><\/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=\"#\" target=\"_blank\" style=\"FONT-WEIGHT:bold;
COLOR:red\">>
>
ͼ������<\/a><br><br><a href=\"#\" target=\"_blank\" style=\"FONT-WEIGHT:bold;
COLOR:blue\">>
>
�����ز�<\/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';
}