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之网页换肤实现代码
Apr 30 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
vue全局使用axios的操作
Sep 08 Javascript
详解Vite的新体验
Feb 22 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的库,结果发现很多东西
2006/12/31 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
PDO::prepare讲解
2019/01/29 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
JavaScript File分段上传
2016/03/10 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python 读写文件的操作代码
2018/09/20 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
剪彩仪式主持词
2014/03/19 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
应届大学生自荐书
2014/06/17 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
公司周年庆寄语
2019/06/21 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python