### 仿MSN右下角弹窗知识点解析 #### 一、概述 在早期的互联网时代,MSN Messenger(简称MSN)是极为流行的一款即时通讯软件。它不仅提供了基本的文字聊天功能,还引入了一些特色的设计,比如右下角弹出式消息通知窗口。这种设计后来被广泛应用于网页和其他应用软件中,成为一种经典的消息提示方式。 本文将基于提供的HTML代码片段,详细介绍如何创建一个类似MSN右下角弹窗的效果,并深入分析其实现原理和技术细节。 #### 二、实现原理 ##### 1. **HTML结构搭建** 根据所提供的HTML代码,可以看到整个弹窗主要由`<div>`元素构成,其内部包含了一个表格(`<table>`)用于布局。这种布局方式在早期的网页设计中非常常见。 - **主容器**:使用`<div id="msn">`作为整个弹窗的容器。 - **样式设置**: - 定位属性:通过`position: absolute;`实现绝对定位。 - 尺寸与位置:通过`left`和`top`属性设置初始位置。 - 边框样式:使用`border`属性定义边框样式。 - 背景颜色:使用`background-color`设置背景色。 ##### 2. **CSS样式设计** 虽然提供的代码片段没有直接使用外部CSS文件来管理样式,但是内联样式(`style`属性)被用来定义弹窗的各种样式。这包括了边框、背景图像、文字颜色等。 - **边框样式**:通过`border`属性设置不同方向上的边框颜色和宽度。 - **背景颜色与图片**:通过`background-color`和`background-image`设置背景颜色和图片。 - **字体样式**:使用`font-size`和`font-weight`调整字体大小和粗细。 ##### 3. **JavaScript交互逻辑** - **显示与隐藏**:通过调用`document.writeln()`动态生成HTML内容,并通过`document.getElementById('msn').style.display = 'none'`控制显示与隐藏。 - **位置调整**:使用JavaScript函数`moveR()`来动态调整弹窗的位置。 - `msn.style.top = document.body.clientHeight - 174;` - `msn.style.left = document.body.clientWidth - 225;` 这些代码确保了弹窗始终位于屏幕的右下角,且不会被页面滚动所影响。 #### 三、技术细节分析 ##### 1. **绝对定位** 在提供的代码中,弹窗使用了`position: absolute;`进行定位。这种方式可以让元素相对于最近的已定位祖先元素定位,如果没有已定位的祖先,则相对于初始包含块定位。这里弹窗相对于`body`元素定位。 ##### 2. **事件处理** - **关闭按钮**:通过为关闭按钮添加`onclick`事件,调用`closeDiv()`函数来隐藏弹窗。 - **动态调整位置**:使用`window.onresize`监听窗口大小变化,调用`moveR()`函数更新弹窗位置。 ##### 3. **兼容性考虑** 由于这段代码是基于早期浏览器编写的,可能在现代浏览器中存在一定的兼容性问题。例如,使用`document.writeln()`可能会导致在某些情况下无法正确渲染页面。因此,在实际项目中,建议使用更现代的方法如DOM操作API来动态生成和修改页面内容。 #### 四、总结 通过以上分析可以看出,仿MSN右下角弹窗的实现涉及到HTML、CSS和JavaScript的综合运用。尽管这段代码相对简单,但它为初学者提供了一个很好的实践机会,可以帮助他们理解前端开发中的基本概念和技术细节。同时,随着技术的发展,开发者也可以借鉴这段代码的核心思路,采用更现代化的技术栈来实现相似的功能。
<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>
- Faith_s2018-07-11值得学习,举一反三
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助