js实现类似MSN提示的页面效果代码分享


Posted in Javascript onAugust 24, 2015

这是一篇基于javascript实现了模仿MSN消息提示的效果,推荐给大家,感兴趣的小伙伴们可以参考一下。

运行效果图:----------------------查看效果-----------------------

js实现类似MSN提示的页面效果代码分享

js实现类似MSN提示的页面效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的模仿MSN消息提示的效果代码如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Keywords" content="51windows.Net">
<META NAME="Author" CONTENT="haiwa">
<title>类似MSN提示的页面效果</title>
</head>

<body scroll=no>
看到右下角的提示了吗?如果没有看到,<button onclick=location.reload();>刷新</button>一下
<script language="JavaScript">
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
//短信提示使用(asilas添加)
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
 try{
 divTop = parseInt(document.getElementById("eMeng").style.top,10)
 divLeft = parseInt(document.getElementById("eMeng").style.left,10)
 divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
 divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
 docWidth = document.body.clientWidth;
 docHeight = document.body.clientHeight;
 document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
 document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
 document.getElementById("eMeng").style.visibility="visible"
 objTimer = window.setInterval("moveDiv()",10)
 }
 catch(e){}
}

function resizeDiv()
{
 i+=1
 if(i>500) closeDiv()
 try{
 divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
 divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
 docWidth = document.body.clientWidth;
 docHeight = document.body.clientHeight;
 document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
 document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
 }
 catch(e){}
}

function moveDiv()
{
 try
 {
 if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
 {
 window.clearInterval(objTimer)
 objTimer = window.setInterval("resizeDiv()",1)
 }
 divTop = parseInt(document.getElementById("eMeng").style.top,10)
 document.getElementById("eMeng").style.top = divTop - 1
 }
 catch(e){}
}
function closeDiv()
{
 document.getElementById('eMeng').style.visibility='hidden';
 if(objTimer) window.clearInterval(objTimer)
}
</script>
<DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
 <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0>
 <TBODY>
 <TR>
 <TD style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c" width=30 height=24></TD>
 <TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" vAlign=center width="100%"> 短消息提示:</TD>
 <TD style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" vAlign=center align=right width=19><span title=关闭 style="CURSOR: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span><!-- <IMG title=关闭 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="msgClose.jpg"> --></TD>
 </TR>
 <TR>
 <TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px" colSpan=3 height=90>
 <DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">您有<font color=#FF0000>1</font>封新短消息<BR><BR>
 <DIV align=center style="word-break:break-all"><a href="javascript:alert('你好')"><font color=#FF0000>点击查看短信</font></a></DIV

 </DIV>
 </TD>
 </TR>
 </TBODY>
 </TABLE>
</DIV>

</body>
</html>

以上就是为大家分享的模仿MSN消息提示的效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
原生js实现轮播图
Feb 27 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 #Javascript
jquery性能优化高级技巧
Aug 24 #Javascript
javascript实现支持移动设备画廊
Aug 24 #Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 #Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 #Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 #Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 #Javascript
You might like
无线电的诞生过程
2021/03/01 无线电
PHP文件下载类
2006/12/06 PHP
php统计数组元素个数的方法
2015/07/02 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
两个Javascript小tip资料
2010/11/23 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Python简单实现区域生长方式
2020/01/16 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
幼儿园庆六一游园活动方案
2014/01/29 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
庆六一宣传标语
2014/10/08 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
演讲开场白和结束语
2015/05/29 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
社区结对共建协议书
2016/03/23 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android