js实现仿MSN带关闭功能的右下角弹窗代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了js实现仿MSN带关闭功能的右下角弹窗代码。分享给大家供大家参考。具体如下:

这是一款非常精致漂亮的仿MSN右下角弹出窗口,带关闭功能,直接复制代码就管用。演示要用到几个小图片,运行的时候点击右键保存一下,这里提供一种思路,并不完全局限于此种方法,熟能生巧。

先来看看运行效果截图:

js实现仿MSN带关闭功能的右下角弹窗代码

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 定义function的三种方式小结
Oct 16 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 #Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 #Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 #Javascript
基于JS实现简单的样式切换效果代码
Sep 04 #Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 #Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 #Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 #Javascript
You might like
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JS表的模拟方法
2015/02/05 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
python简单实现旋转图片的方法
2015/05/30 Python
python学习之编写查询ip程序
2016/02/27 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
员工安全生产责任书
2014/07/22 职场文书
家长评语怎么写
2014/12/30 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
MySQL派生表联表查询实战过程
2022/03/20 MySQL