`

类似MSN提示的页面效果

    博客分类：
  • js
JavaScriptWebHTML 
阅读更多 
<html>
<head>
<title>类似MSN提示的页面效果-阿里西西<a target="_blank" href="http://www.alixixi.com/" class="wordstyle">WEB开发</a>www.alixixi.com</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 src="msgClose.jpg" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> --></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封新短消息<BR><BR>
				<DIV align=center style="word-break:break-all"><a href="javascript:alert('你好')"><font color=#FF0000>点击查看短信</a></DIV

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

</html>

 

 

效果：



 

  • 大小: 9.3 KB
分享到：
| JS省市二级联动网页特效菜单
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    页面右下角弹出类似MSN的消息提示

    页面右下角弹出类似MSN的消息提示 网上有代码，里面可以自己修改一下参数，变成自己实用的Js

    一个弹出提示框的msn效果

    在IT领域，实现类似MSN（Microsoft Network）的弹出提示框效果可以为网站增添互动性和用户体验。MSN作为曾经流行的即时通讯软件，其消息提示框设计简洁且吸引人，因此许多开发者会模仿这种效果来创建自己的通知系统...

    【精华】页面右下角弹出类似QQ或MSN的消息提示

    标题中的“【精华】页面右下角弹出类似QQ或MSN的消息提示”指的是在网页设计中实现一种类似于即时通讯软件（如QQ、MSN）的消息提示功能。这种功能常见于许多网站，尤其是企业级应用，用于通知用户新消息、提醒或者...

    页面右下角弹出消息提示框类似QQ或者MSN+ASP.NET

    在ASP.NET开发中，创建一个类似QQ或MSN的页面右下角弹出消息提示框功能是一项常见的需求。这种提示框可以用于通知用户、显示警告信息或者进行交互式操作反馈。以下是一个详细的实现步骤和相关知识点： 1. **CSS布局...

    页面右下角弹出类似QQ或MSN的消息提示.rar

    在网页设计中，为了增强用户体验和互动性，开发者经常会在页面右下角设计类似QQ或MSN的消息提示功能。这种功能可以模拟即时通讯软件中的消息通知，让用户在浏览网页时能够实时接收并查看重要信息。本教程将深入探讨...

    弹出类似MSN的消息提示.rar

    标题中的“弹出类似MSN的消息提示”指的是在网页中实现一种与即时通讯软件MSNMessenger相似的动态消息提示效果。MSN Messenger是微软公司早期的一款即时通讯应用，它以直观、实时的聊天功能著称，其中的提示信息通常...

    类似MSN Message提示信息的web控件

    【标题】：“类似MSN Message提示信息的Web控件”指的是在网页中实现类似于微软的MSN Messenger应用程序中的消息提示效果的用户界面元素。这种控件通常用于网页应用中，以提供实时的通知或者信息提示，增强用户体验...

    页面右下角弹出类似QQ或MSN的消息提示

    综上所述，实现"页面右下角弹出类似QQ或MSN的消息提示"这一功能，涉及到前端的JavaScript编程、CSS样式设计、动画效果实现，以及可能的后端实时通信。通过合理的技术选型和设计，可以创造出高效且用户友好的消息提示...

    ASP.NET类似MSN弹出提示窗口

    在压缩包内的文件"ASP.NET类似MSN提示消息"可能是示例代码、教程文档或者是演示此功能的网页文件。这个文件可能包含了如何在ASP.NET中利用popupwin.dll或类似的机制创建MS风格提示窗口的详细步骤和代码示例。 实现...

    仿qq,MSN页面js提示

    "qq提示"和"msn提示"代表了两种不同的风格，它们都是即时通讯软件常见的用户界面元素，而"js"则表明实现这些提示效果主要依赖JavaScript，这是一种广泛用于网页动态效果的脚本语言。JavaScript允许开发者在不刷新...

    页面右下角弹出类似QQ或MSN的消息提示.pdf

    【网页右下角弹出类似QQ或...总之，`CLASS_MSN_MESSAGE`类提供了一种简单的方式来在网页的右下角创建具有类似QQ或MSN消息提示的动态效果。开发者可以通过调整参数和扩展方法来满足不同场景的需求，增强网页的用户体验。

    页面右下角弹出类似QQ、MSN多条消息提示(提示可连接)

    标题提到的“页面右下角弹出类似QQ、MSN多条消息提示(提示可连接)”就是这样的一个设计，它允许网站向用户推送通知或消息，并且这些消息可以链接到本地页面或外部网址，从而引导用户进行特定的操作。 这个功能的...

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

    1. **MSN消息提示效果实现：** 通过JavaScript编程实现类似MSN即时通讯软件的消息提示效果。这种效果通常用于在网页上模拟系统消息通知，提升用户体验。 2. **HTML和JavaScript基础：** 代码示例中使用了HTML标签来...

    页面右下角弹出类似QQ、MSN多条消息提示(提示消息有URL链接)

    在网页设计和用户体验优化中，实现“页面右下角弹出类似QQ、MSN多条消息提示(提示消息有URL链接)”的功能是一项常见的需求。这样的功能可以让用户在浏览网站时，实时接收并交互与网站内容相关的通知，提升用户的参与...

    类似msn登陆的通知框弹出效果.zip

    这个名为“类似msn登陆的通知框弹出效果.zip”的压缩包文件，显然包含了一个用于实现类似MSN（Microsoft Messenger）登录通知框的前端代码示例。MSN曾是一款流行的即时通讯软件，其登录通知框的动画效果因其友好和...

    用C#做的类似MSN中自动弹出消息页面

    在本文中，我们将深入探讨如何使用C#编程语言创建一个类似MSN中自动弹出消息页面的应用程序。MSN，即Microsoft Network，曾是一款流行的即时通讯软件，它的消息弹出功能是其用户界面的重要组成部分。通过使用C#，...

Magicbox
Global site tag (gtag.js) - Google Analytics