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 相关文章推荐
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
js继承实现方法详解
2016/12/16 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
保安拾金不昧表扬信
2014/01/15 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
建筑工地质量标语
2014/06/12 职场文书
活动总结报告怎么写
2014/07/03 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
房屋维修申请报告
2015/05/18 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
女性健康讲座主持词
2015/07/04 职场文书
深入理解python多线程编程
2021/04/18 Python