从底向上伸展，上面提示说：你有新的消息，请注意查看
<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提示的页面效果-51windows.Net－[url=http://www.51windows.Net]www.51windows.Net[/url]</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;COLOR: #0f2c8c" width=30 height=24></TD>
<TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px;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;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>
分享到：
相关推荐
JavaScript提示框特效是一种常见的网页交互元素，用于向用户显示信息、警告或确认操作。在网页开发中，我们经常需要自定义这些提示框以提供更好的用户体验。传统的JavaScript提示框包括`alert()`, `prompt()`, 和 `...
1. **基本的JavaScript提示框：alert()** JavaScript 提供了 `alert()` 函数，用于弹出一个带有单一按钮的警告对话框，通常用于简单的信息提示。例如： ```javascript alert("这是一条文字提示信息！"); ``` 这...
通过自定义的JavaScript提示框，开发者可以创造出既美观又实用的交互体验，从而提高用户的满意度和产品的整体品质。在实际项目中，我们可以根据具体需求选择合适的库或框架，结合提供的API文档，快速实现个性化提示...
在这个“非常漂亮的JS提示框”主题中，我们主要探讨的是如何利用JS实现一个既美观又实用的提示框，并解决在不同浏览器中，特别是IE6中的兼容性问题。 提示框是用户界面中常见的一种元素，通常用于显示警告、确认...
鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示...
自己写了个alert提示框。因为系统alert在苹果手机微信中，提示时，顶部会显示网站地址。 同时其他后续操作需要在js中继续填写。因此简单用div写了一个alert提示框，并自动关闭。 效果图 css样式 /*弹出消息对话框...
本篇将介绍一个仿QQ界面的JS提示框组件，它旨在提升网页应用中的提示信息展示效果。 这个组件的核心目标是模仿QQ应用程序中的对话框样式，提供一种更加吸引人的视觉体验。在设计上，它可能包括更细腻的动画效果、可...
总的来说，"js提示框美化"是一个提高网页UI/UX的实用工具，通过自定义的JavaScript和CSS，可以让网页中的提示信息变得更加生动有趣，提升用户对网站的整体印象。对于前端开发者来说，这是一个值得学习和掌握的技术，...
在IT行业中，自定义JavaScript提示框是一个常见的需求，特别是在网页应用和交互设计中。传统的JavaScript提供了`prompt`、`alert`和`confirm`这三种基本的提示方式，但它们的功能和样式较为有限，无法满足复杂场景下...
JavaScript提示框插件是一种常用的网页交互元素，它能够在鼠标悬停在特定元素上时，以弹出的小窗口显示额外的信息。这种插件通常被称为“tooltips”，它可以帮助用户了解页面上某些元素的具体含义或详细内容，而无需...
标题中的“一个自动缩放的JS提示框”指的是在网页中使用JavaScript实现的一种动态调整大小的提示窗口。这种提示框可以根据需要显示的信息量自动改变自身的尺寸，为用户提供更好的阅读体验。这种技术通常用于显示警告...
总的来说，这个JS提示框项目展示了如何利用JavaScript和CSS来实现一个功能齐全、风格独特的提示消息框，并且考虑到了老版本浏览器的兼容性问题，对于学习和实践中提升前端开发技能具有一定的参考价值。
综合这些知识点，我们可以构建一个简单的示例项目，包含自定义的JavaScript提示框、字符编码处理、自动提交表单、图片懒加载和箭头导航的幻灯片功能。这些技术都是前端开发中常见的，对于提升用户体验和网页性能有着...
通过以上步骤，我们可以创建一个仿QQ界面的JS提示框组件。此组件不仅可以用于显示简单的消息，还可以实现复杂的对话框功能，如确认操作、输入框等。在实际项目中，可以根据需求进行进一步的定制和扩展，以满足更多...
title的格式 title="header=[...] body=[...]" 直接打开就可以看到效果，很炫的哦
本项目“仿QQ界面的JS提示框组件”是一个专门针对前端开发的代码资源，旨在提供一种模拟QQ应用程序中常见提示框效果的JavaScript解决方案。这种组件能够提升用户体验，使用户界面更加友好和直观。 首先，我们要理解...
《仿QQ界面的JS提示框组件详解》 在网页交互设计中，提示框是一种不可或缺的元素，用于向用户展示信息、确认操作或提供反馈。本文将详细介绍一款仿QQ界面的JS提示框组件，该组件以其美观的界面和灵活的参数设置，为...