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 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
Java无向树分析 实现最小高度树
Apr 09 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数据采集的详解
2013/06/02 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
Python管理Windows服务小脚本
2018/03/12 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
python打包生成so文件的实现
2020/10/30 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
总经理职责
2013/12/22 职场文书
师德学习感言
2014/01/31 职场文书
统计岗位职责
2014/02/21 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
代收款委托书范本
2014/10/01 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
领导欢送会主持词
2015/07/06 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
排查MySQL生产环境索引没有效果
2022/04/11 MySQL
oracle数据库去除重复数据
2022/05/20 Oracle