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 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JS轮播图的实现方法
Aug 24 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
php数组总结篇(一)
2008/09/30 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
Vue 实现树形视图数据功能
2018/05/07 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
详解Python装饰器由浅入深
2016/12/09 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
售后服务科岗位职责范文
2013/11/13 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书