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实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
详解node中创建服务进程
May 09 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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
pdo中使用参数化查询sql
2011/08/11 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python re模块介绍
2014/11/30 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python使用matplotlib画饼状图
2018/09/25 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
pygame实现弹球游戏
2020/04/14 Python
Python LMDB库的使用示例
2021/02/14 Python
某个公司的Java笔面试题
2016/03/11 面试题
什么是.net
2015/08/03 面试题
演讲比赛获奖感言
2014/02/02 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
师德承诺书2015
2015/04/28 职场文书
优秀志愿者感言
2015/08/01 职场文书
护理工作心得体会
2016/01/22 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android