js实现仿MSN带关闭功能的右下角弹窗代码
更新时间：2015年09月04日 16:38:18 作者：企鹅
这篇文章主要介绍了js实现仿MSN带关闭功能的右下角弹窗代码,涉及javascript操作页面元素的布局及属性的动态变换技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js实现仿MSN带关闭功能的右下角弹窗代码。分享给大家供大家参考。具体如下：
这是一款非常精致漂亮的仿MSN右下角弹出窗口，带关闭功能，直接复制代码就管用。演示要用到几个小图片，运行的时候点击右键保存一下，这里提供一种思路，并不完全局限于此种方法，熟能生巧。
先来看看运行效果截图：
在线演示地址如下：
http://demo.jb51.net/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\"\/><\/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=\"/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程序设计有所帮助。
相关文章
这篇文章主要介绍了JS获取下拉框显示值和判断单选按钮的方法,实例分析了javascript针对html下拉框及单选按钮的相关操作技巧,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JavaScript动态检测密码强度原理及实现方法,结合具体实例形式详细分析了javascript针对输入字符串密码强度检测的原理与相关判断操作技巧,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了读Javascript高性能编程重点笔记,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了javascript实现控制的多级下拉菜单，包含示例代码，效果非常不错，这里推荐给大家。2015-07-07
JavaScript搜索字符串并将搜索结果返回到字符串的方法
这篇文章主要介绍了JavaScript搜索字符串并将搜索结果返回到字符串的方法,涉及javascript中match方法操作字符串的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
网站接入QQ登录，首先引入授权js文件，这个需要提交申请的，通过之后按照下面的步骤进行操作就可以了2014-07-07
本文主要介绍了uni-app组件的基本使用,包括组件的引入、使用和常见问题解决方法,通过本文的学习,读者可以掌握uni-app组件的基本操作,为开发uni-app应用提供帮助,需要的朋友可以参考下2023-03-03
懒加载（Lazy Loading）是一种在软件开发中常用的优化技术,它主要用于延迟加载资源,直到真正需要使用的时候才进行加载,这样可以减少初始加载的时间和资源消耗,并提升用户体验,本文给大家详细介绍了JavaScript的懒加载是如何实现的,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了微信小程序实现搜索框功能及踩过的坑,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要给大家介绍了关于JavaScript块级作用域绑定以及状态提升的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
最新评论