首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

怎么在网页右下角弹出信息提示

2012-03-22 
如何在网页右下角弹出信息提示如何在网页的右下角弹出信息提示,由下而上的冒出来,当网页框架大小改变时,那

如何在网页右下角弹出信息提示

  如何在网页的右下角弹出信息提示,由下而上的冒出来,   当网页框架大小改变时,

那个信息框仍然在网页的右下角,位置不会变。



[解决办法]
还是在左上角吧,因为那里是原点!

计算起来容易些!

用 Div 可以实现!
[解决办法]
如果采用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

似乎无法获得 IE 窗口高度!

不过用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
就可以!

示例代码如下,LZ 自己改改吧,下班了,哈

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> new document </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= " " />
<meta name= "keywords " content= " " />
<meta name= "description " content= " " />
</head>

<body>
<div style= "background-color: red; width: 100%; height: 100 % "> </div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script type= "text/javascript ">
<!--
document.body.onclick = function()
{
document.body.scroll = "no ";
var message = window.screen.availWidth + " : " + window.screen.availHeight + "\n ";
message += window.screen.width + " : " + window.screen.height + "\n ";
message += document.body.offsetWidth + " : " + document.body.offsetHeight + "\n ";
message += document.body.clientWidth + " : " + document.body.clientHeight + "\n ";
message += document.body.scrollWidth + " : " + document.body.scrollHeight + "\n ";

alert(message);
};
//-->
</script>
</body>
</html>

[解决办法]
<HTML>
<HEAD>
<META http-equiv= "content-type " content= "text/html; charset=gb2312 "/>
<base href= "http://dotnet.aspx.cc/ ">
<LINK href= "Images/favicon.ico " rel= "Shortcut Icon "/>
<LINK href= "Detail.css " type= "text/css " rel= "stylesheet "/>
</HEAD>
<body>
<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 width= "100% " border= "0 " cellpadding= "0 " cellspacing= "0 " style= "BORDER-TOP:#ffffff 1px solid; BORDER-LEFT:#ffffff 1px solid "


bgcolor= "#cfdef4 ">
<tr>
<td height= "24 " width= "26 " style= "FONT-SIZE:12px;BACKGROUND-IMAGE:url(Images/msgTopBg.gif);COLOR:#0f2c8c "
valign= "middle "> <img src= "image/meng.gif " hspace= "5 " align= "absMiddle " vspace= "1 "/> </td>
<td style= "FONT-WEIGHT:normal;FONT-SIZE:9pt;BACKGROUND-IMAGE:url(Images/msgTopBg.gif);COLOR:#1f336b;PADDING-TOP:4px "
valign= "middle " width= "100% "> 温馨提示: </td>
<td style= "BACKGROUND-IMAGE:url(Images/msgTopBg.gif);PADDING-TOP:2px " valign= "middle "
width= "19 " align= "right "> <img src= "Images/msgClose.jpg " hspace= "3 " style= "CURSOR:pointer " onclick= "closeDiv() " title= "关闭 "/> </td>
</tr>
<tr>
<td colspan= "3 " height= "90 " style= "PADDING-RIGHT:1px;BACKGROUND-IMAGE:url(Images/msgBottomBg.jpg);PADDING-BOTTOM:1px ">
<div style= "BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100% "> 请打开您的音箱收听不同的音乐吧,随机播放。快试试吧!:) <br/>
<div align= "center "> <a href= "# " onclick= "window.parent.frames[ 'TopMusic '].location= 'Play.aspx ';return false "
style= "FONT-WEIGHT:bold;COLOR:navy "> 收听全部 </a> </div>
</div>
</td>
</tr>
</table>
</div>

<script language= "JavaScript " type= "text/javascript ">
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> 1288) 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)
}
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){return false}
</script>
</body>
</HTML>

热点排行